vsCode使用ESLint+Prettier来统一前端代码风格

vsCode使用ESLint+Prettier来统一前端代码风格

在写vue项目中，统一的代码风格就愈来愈重要 可是关于代码风格，咱们很难区分谁对谁错，不一样的人有不一样偏好，惟有强制要求才能规避争论。 因此，团队关于代码风格必须遵循两个基本原则：

1. 少数服从多数；
2. 用工具统一风格。

目标是：vsCode使用 Eslint校验代码语法，prettier统一格式化代码，按下保存自动修复eslint错误，自动格式化代码（由于懒~）

安装vscode插件

首先，须要安装 Vetur、ESLint、Prettier - Code formatter这三个插件，安装完重启下，防止插件不生效。

另外这里有个坑， Beautify插件会占用格式化代码的快捷键，所以会和prettier产生冲突，因此直接禁用掉。

vscode插件配置

打开vscode工具的设置,在settings.json中配置

配置以下

"search.followSymlinks": false,
  "search.useIgnoreFiles": false,
  "guides.enabled": false,
  "editor.tabSize": 2,
  "git.confirmSync": false,
  "window.zoomLevel": 0,
  "editor.renderWhitespace": "boundary",
  "editor.cursorBlinking": "smooth",
  "editor.minimap.enabled": true,
  "editor.minimap.renderCharacters": false,
  "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",
  "editor.codeLens": true,
  // 配置文件关联，以便启用对应的提示
  "files.associations": {
    "*.vue": "vue",
    "*.wxss": "css"
  },
  // 配置emmet是否启用tab展开缩写
  "emmet.triggerExpansionOnTab": true,
  // 配置emmet对文件类型的支持
  "emmet.syntaxProfiles": {
    "javascript": "jsx",
    "vue": "html",
    "vue-html": "html"
  },
  // 是否开启eslint检测
  "eslint.enable": true,
  // 文件保存时是否根据eslint进行格式化
  "eslint.autoFixOnSave": true,
  // eslint配置文件
  "eslint.options": {
    "extensions": [".js", ".vue"]
  },
  // eslint可以识别的文件后缀类型
  "eslint.validate": [
    "javascript",
    {
      "language": "vue",
      "autoFix": true
    },
    "html",
    "vue"
  ],
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/dist": true
  },
 
复制代码

ESLint 和 Prettier 的冲突修复

因为须要同时使用prettier和eslint，而prettier的一些规则和eslint的一些规则可能存在冲突，例如prettier字符串默认是用双引号而esLint定义的是单引号的话这样格式化以后就不符合ESLint规则了。

因此要解决冲突就须要在Prettier的规则配置里也配置上和ESLint同样的规则，直接覆盖掉，ESLint和Prettier的配置文件内容以下：

// 格式化快捷键（默认）：Shift+Alt+F
  // prettier进行格式化时，开启eslint支持
  "prettier.eslintIntegration": true,
  // 是否使用单引号
  "prettier.singleQuote": true,
   //js-beautify-html格式化配置，属性强制换行
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "semi": false,
      "singleQuote": true
    },
    "js-beautify-html": {
      "wrap_attributes": "force-aligned"
    }
  },
  "prettier.singleQuote": true,
 "prettier.semi": false,
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"vetur.format.defaultFormatter.js": "vscode-typescript",
"leetcode.endpoint": "leetcode-cn",
"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
 }
复制代码

效果预览

结尾不能有分号。

最后

参考了不少网上大佬的文章，可是感受这个配置好像还差了哪里，但又始终不知道问题在哪里，热烈欢迎你们交流指教。