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

2,293 阅读2分钟

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

在写vue项目中,统一的代码风格就越来越重要 但是关于代码风格,我们很难区分谁对谁错,不同的人有不同偏好,唯有强制要求才能规避争论。 所以,团队关于代码风格必须遵循两个基本原则:

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

目标是:vsCode使用 Eslint校验代码语法,prettier统一格式化代码,按下保存自动修复eslint错误,自动格式化代码(因为懒~)

安装vscode插件

首先,需要安装 VeturESLintPrettier - 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 的冲突修复

由于需要同时使用prettiereslint,而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"
 }

效果预览

结尾不能有分号。

最后

参考了很多网上大佬的文章,但是感觉这个配置好像还差了哪里,但又始终不知道问题在哪里,热烈欢迎大家交流指教。