VS Code #

基本规则 #

1. 必须的规则 #

• editor.tabSize必须为2

• editor.formatOnSave必须为true，意思是保存时自动格式化文档，以便提交 Git 时格式是统一的。

• window.title的值将原本的${activeEditorShort}改为${activeEditorMedium}，意思是在视窗顶部标题栏显示更具体的文件路径。

• 彩虹嵌套花括号："editor.bracketPairColorization.enabled":true,和"editor.guides.bracketPairs":"active",。

• 其他保持默认

2. 在项目中强制执行规则 #

在项目根目录创建/.vscode/settings.json，该设置只应用于该项目，优先级高于 VS Code 全局设置。

{
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}${separator}${appName}",
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs":"active",
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

插件 #

1. 必装、选装、禁装的插件 #

• ✔️ 必须安装的插件至少有这些：

  • Auto Close Tag

  • Auto Rename Tag

  • IntelliSense for CSS class names in HTML

  • Prettier - Code formatter

  • volar（对应 Vue 3）或Vetur（对应 Vue 2）

  • Vue Peek

• ✔️ 可选安装的插件至少有这些：

  • JavaScript (ES6) code snippets 全部片段

  • Vue VSCode Snippets 全部片段

• ❌ 必须不应安装的插件至少有：

  • Bracket Pair Colorizer：VS Code 已经原生支持。

  • ESLint：整个项目中都不应使用ESLint的任何产品。因为：

2. 如何强制推行插件 #

为了将必装插件强烈推荐给同事程序员，应在项目根目录创建/.vscode/extensions.json，内容：

{
  "recommendations": [
    "dariofuzinato.vue-peek",
    "MS-CEINTL.vscode-language-pack-zh-hans",
    "esbenp.prettier-vscode",
    "formulahendry.auto-close-tag",
    "formulahendry.auto-rename-tag",
    "Zignd.html-css-class-completion"
  ]
}

如果是 Vue 2 项目，再追加"octref.vetur",，如果是 Vue 3 项目，再追加"johnsoncodehk.volar",。

如果希望变更推荐的插件，可以任意命令行执行code --list-extensions，这会打印出本机 VS Code 安装的插件，然后更改/.vscode/extensions.json即可。

创建 jsconfig.json #

Vetur要求项目根目录必须有jsconfig.json，文件必须至少包括这些配置项：

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
    "moduleReSolutions": "node",
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
  }
}

Prettier 注意事项 #

• 项目根目录必须创建.prettierrc，内容应只写两行，其他必须一律保持默认：

{
  "singleQuote": true,
  "printWidth": 120
}

• 凡首次打开某种类型的文件之后，都应右击编辑区，选择格式化文档，必须选择Prettier - Code formatter，之后凡保存文件，VS Code 都会自动格式化文件。

• 凡遇到 VS Code 提示“XX”文件有多个格式化程序。选择默认格式化程序以继续。，必须一律选择Prettier - Code formatter。

利用 VS Code 删除 node_modules #

Windows 删除 node_modules 目录很慢，所以可以使用 VS Code 来删除，10 秒以内可快速删除。