Visual Studio Code 配置

扩展插件推荐

主题相关

HTML 相关

React 相关

  • ES7 React/Redux/GraphQL/React-Native snippets

Vue 相关

CSS 相关

AI 代码提示和生成

Markdown 相关

Git 相关

格式和代码检查相关

调试相关

语法支持

开发体验提升

微信小程序相关

  • WXML - Language Service
    • 微信小程序标签、属性的智能补全(同时支持原生小程序、mpvuewepy 框架,并提供 snippets)
    • 插件地址open in new window

其他

webpack 项目识别 alias

  1. 在项目根目录新建 jsconfig.jsontsconfig.json
  2. 添加以下代码,其中 paths 字段的值要与你项目配置的 alias 一致
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src"]
}

推荐配置

// 将设置放入此文件中以覆盖默认设置
{
  /** 编辑器相关配置 */
  "editor.fontSize": 13.5,
  "editor.fontFamily": "Input Mono, Fira Code, monospace",
  "editor.fontLigatures": "'ss01', 'ss02', 'ss03', 'ss06', 'zero'",
  "editor.tabSize": 2,
  // 关闭快速预览
  "editor.minimap.enabled": true,
  "editor.wordWrap": "on",
  "editor.lineNumbers": "on",
  "editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true
  },
  // bug控制缩进不关tabSize修改无用
  "editor.detectIndentation": false,
  "editor.inlineSuggest.enabled": true,
  "editor.cursorSmoothCaretAnimation": true,
  "editor.multiCursorModifier": "ctrlCmd",
  "editor.renderWhitespace": "boundary",
  "editor.glyphMargin": true,
  "editor.accessibilitySupport": "off",
  // 保存格式化
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.fixAll.eslint": true
    // "source.organizeImports": true,
  },
  "editor.unicodeHighlight.allowedLocales": {
    "zh-hans": true
  },
  /** 工作台配置 */
  "workbench.colorTheme": "Bluloco Dark",
  "workbench.iconTheme": "material-icon-theme",
  // 新开标签页查看文件而不是覆盖当前标签页
  "workbench.editor.enablePreview": false,
  "workbench.editor.closeOnFileDelete": true,
  "workbench.editor.highlightModifiedTabs": true,
  "workbench.tree.indent": 14,
  "workbench.list.smoothScrolling": true,
  "workbench.activityBar.visible": true,
  "workbench.startupEditor": "newUntitledFile",
  "workbench.fontAliasing": "antialiased",
  /** 终端配置 */
  "terminal.integrated.cursorBlinking": true,
  "terminal.integrated.persistentSessionReviveProcess": "never",
  "terminal.integrated.tabs.enabled": true,
  "terminal.integrated.cursorStyle": "line",
  "extensions.autoUpdate": "onlyEnabledExtensions",
  "extensions.ignoreRecommendations": true,
  // 如需要开发微信小程序,需要注释这段代码,不然会和 minapp-vscode 插件冲突
  // "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  // 有注释的 json
  "[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[wxml]": {
    "editor.defaultFormatter": "qiu8310.minapp-vscode"
  },
  // 文件配置
  "files.associations": {
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript",
    "*.vue": "vue",
    "*.env.*": "env"
  },
  "files.exclude": {
    "**/.idea": true
  },
  "files.insertFinalNewline": true,
  "files.simpleDialog.enable": true,
  /** 文件搜索配置 */
  "search.exclude": {
    // 配置文件
    "**/.vscode": true,
    "**/.git": true,
    "**/.github": true,
    // 依赖文件
    "**/node_modules": true,
    "**/bower_components": true,
    "**/miniprogram_npm": true,
    // lock 文件
    "**/package-lock.json": true,
    "**/yarn.lock": true,
    "**/pnpm-lock.yaml": true,
    // 打包文件
    "**/dist": true,
    "**/.umi": true
  },
  "scm.defaultViewMode": "tree",
  /** git 相关 */
  "git.ignoreMissingGitWarning": true,
  "git.autofetch": true,
  "git.untrackedChanges": "separate",
  /** 资源管理器配置 */
  "explorer.confirmDelete": false,
  "explorer.confirmDragAndDrop": false,
  /*** 第三方扩展配置 ***/
  /** eslint 配置 */
  "eslint.format.enable": true,
  "eslint.options": {
    "extensions": [".js", ".jsx", ".ts", ".tsx", ".vue"]
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html",
    "vue",
    "markdown",
    "json",
    "jsonc",
    "json5"
  ],
  /** prettier 配置 */
  // 是否每行末尾添加分号
  "prettier.semi": false,
  // 是否使用单引号
  "prettier.singleQuote": true,
  "prettier.printWidth": 100,
  "prettier.trailingComma": "none",
  /** errorLens 配置 */
  "errorLens.enabledDiagnosticLevels": ["warning", "error"],
  "errorLens.excludeBySource": ["cSpell", "Grammarly", "eslint"],
  /** Code Spell Checker 配置 */
  "cSpell.allowCompoundWords": true,
  "cSpell.language": "en,en-US",
  "cSpell.ignoreWords": [
    /** 库相关 */
    "yalc",
    "vetur",
    "vuex",
    "vuepress",
    "vite",
    "antd",
    "ahooks",
    "weui",
    "weapp",
    "craco",
    "execa",
    /** 文件后缀 */
    "wxml",
    "xmind",
    /** 常用简写 */
    "btns"
  ],
  /** emmet 配置 */
  "emmet.showSuggestionsAsSnippets": true,
  "emmet.triggerExpansionOnTab": true,
  "emmet.includeLanguages": {
    "vue-html": "html",
    "javascript": "javascriptreact",
    "wxml": "html"
  },
  /** vetur 配置 */
  "vetur.format.defaultFormatter.html": "prettyhtml",
  "vetur.format.defaultFormatter.js": "prettier-eslint",
  "vetur.format.defaultFormatterOptions": {
    "prettyhtml": {
      "printWidth": 80, // No line exceeds 100 characters
      "singleQuote": false // Prefer double quotes over single quotes
    },
    "prettier": {
      // 是否添加分号
      "semi": false,
      // 是否使用单引号
      "singleQuote": true,
      "eslintIntegration": true,
      "parser": "babylon"
    }
  },
  "gitlens.keymap": "alternate",
  "tabnine.experimentalAutoImports": true,
  // 标签高亮
  "highlight-matching-tag.styles": {
    "opening": {
      "left": {
        "custom": {
          "borderWidth": "0 0 0 4px",
          "borderStyle": "solid",
          "borderColor": "LightSkyBlue",
          "borderRadius": "5px"
        }
      },
      "right": {
        "custom": {
          "borderWidth": "0 4px 0 0",
          "borderStyle": "solid",
          "borderColor": "LightSkyBlue",
          "borderRadius": "5px"
        }
      }
    }
  },
  /** markdown 配置 */
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.quickSuggestions": {
      "comments": "on",
      "strings": "on",
      "other": "on"
    }
  },
  "markdown-preview-enhanced.codeBlockTheme": "one-dark.css",
  "markdown-preview-enhanced.previewTheme": "one-dark.css",
  "markdownlint.config": {
    "MD001": false,
    "MD024": false,
    // 内联 HTML
    "MD033": false
  },
  /** 微信小程序配置 */
  "minapp-vscode.disableAutoConfig": true
}

其他

扩展插件开发

上次更新: