1. 插件选择

  • Vetur

作者：Pine Wu
描述：VUE工具包，支持多种语法，为每种语言提供分段高亮展示，语法检查，兼容所有主流css语法
插件链接：https://marketplace.visualstudio.com/items?itemName=octref.vetur

  • Prettier - Code formatter

作者：Prettier
描述：格式化代码工具，以下格式均可处理
JavaScript · TypeScript · Flow · JSX · JSON
CSS · SCSS · Less
HTML · Vue · Angular
GraphQL · Markdown · YAML
插件链接：https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

  • ESLint

作者：Dirk Baeumer
描述：JavaScript语法规则和代码风格的检查工具
插件链接：https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

2. 全局配置settings.json

  1. {
  2.   // tab 大小为2个空格
  3.   "editor.tabSize": 2,
  4.   // 100 列后换行
  5.   "editor.wordWrapColumn": 100,
  6.   // 保存时格式化
  7.   "editor.formatOnSave": true,
  8.   // 开启 vscode 文件路径导航
  9.   "breadcrumbs.enabled": true,
  10.   // prettier 设置语句末尾不加分号
  11.   "prettier.semi": false,
  12.   // prettier 设置强制单引号
  13.   "prettier.singleQuote": true,
  14.   // 选择 vue 文件中 template 的格式化工具
  15.   "vetur.format.defaultFormatter.html": "prettyhtml",
  16.   // 使能每一种语言默认格式化规则
  17.   "editor.defaultFormatter": "esbenp.prettier-vscode",
  18.   // html格式化规则
  19.   "[html]": {
  20.     "editor.defaultFormatter": "vscode.html-language-features"
  21.   },
  22.   // js格式化规则
  23.   "[javascript]": {
  24.     "editor.defaultFormatter": "esbenp.prettier-vscode"
  25.   },
  26.   // vue格式化规则
  27.   "[vue]": {
  28.     "editor.defaultFormatter": "octref.vetur"
  29.   },
  30.   // 显示 markdown 中英文切换时产生的特殊字符
  31.   "editor.renderControlCharacters": true,
  32.   // vetur 的自定义设置
  33.   "vetur.format.defaultFormatterOptions": {
  34.     "prettier": {
  35.       "singleQuote": true,
  36.       "semi": false
  37.     }
  38.   },
  39.   "editor.codeActionsOnSave": {
  40.     "source.fixAll.eslint": true
  41.   },
  42.   "workbench.colorTheme": "Community Material Theme",
  43.   "editor.suggestSelection": "first",
  44.   "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  45.   "workbench.startupEditor": "none",
  46.   "editor.quickSuggestions": {
  47.     "strings": true
  48.   }
  49. }

3.如果是Vue项目，配置.eslintrc.js

  1. module.exports = {
  2.   root: true,
  3.   env: {
  4.     node: true
  5.   },
  6.   extends: ["plugin:vue/essential"],
  7.   rules: {
  8.     "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
  9.     "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
  10.   },
  11.   parserOptions: {
  12.     parser: "babel-eslint"
  13.   }
  14. };

4. 如果是Vue项目，配置.jsbeautifyrc

  1. {
  2.   "brace_style": "none,preserve-inline",
  3.   "indent_size": 2,
  4.   "indent_char": " ",
  5.   "jslint_happy": true,
  6.   "unformatted": [
  7.     ""
  8.   ],
  9.   "css": {
  10.     "indent_size": 2
  11.   }
  12. }