前端项目配置eslint+vscode代码格式化（二）

安装eslint+Prettier - Code formatter+Vetur

调整vscode配置settings.json

{
  "editor.formatOnSave": true,
  "breadcrumbs.enabled": true,
  "editor.codeActionsOnSave": {
    // For ESLint
    "source.fixAll.eslint": true,
    // For TSLint
    "source.fixAll.tslint": true,
    // For Stylelint
    "source.fixAll.stylelint": true
  },
  "vetur.ignoreProjectWarning": true,
  "vetur.format.defaultFormatter.html": "prettyhtml",
  "vetur.format.defaultFormatter.pug": "prettier",
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.postcss": "prettier",
  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.format.defaultFormatter.less": "prettier",
  "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
  // "vetur.format.defaultFormatter.js": "prettier",
  // "vetur.format.defaultFormatter.ts": "prettier",
  "vetur.format.defaultFormatter.sass": "sass-formatter",
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "singleQuote": true,
      "semi": false,
      "trailingComma": "none",
      "eslintIntegration": true,
      "tslintIntegration": true
    }
  },
  "files.autoSave": "afterDelay",
  "files.exclude": {
    "node_modules": true
  },
  "eslint.format.enable": true, //是否开启vscode的eslint
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "javascript.updateImportsOnFileMove.enabled": "always",
  "editor.unicodeHighlight.ambiguousCharacters": false,
  "bracketPairColorizer.depreciation-notice": false,
  "editor.unicodeHighlight.allowedCharacters": {
    " ": true
  }
}

项目根目录配置格式化文件.prettierrc.json

{
  "tabWidth": 2, // 缩进字节数
  "endOfLine": "auto", // 结尾是 \n \r \n\r auto
  "printWidth": 120, // 超过最大值换行
  "proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
  "quoteProps": "as-needed", // 对象的 key 仅在必要时用引号
  "semi": true, // 句尾添加分号
  "singleQuote": true, // 使用单引号代替双引号
  "trailingComma": "none", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
  "useTabs": false, // 缩进不使用tab，使用空格
  "arrowParens": "always", // (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
  "bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
  "eslintIntegration": true, // 使用eslint进行格式化校验
  "vueIndentScriptAndStyle": true // 是否缩进Vue文件中<script>和<style>标记内的代码。
}