【vue】利用prettier插件规避烦人的eslint报错和代码不规范

本文主要包括两点：

• 大家协同开发代码各异，eslint加上@vue/prettier采取recommended+prettier组合可使得代码更规范
• 使用vscode的prettier插件在修改保存时自动格式化代码

插件

首先需要vscode安装 prettier插件

修改package.json

prettier+recommended得包括如下库，不足的补上

    "@vue/cli-plugin-babel": "^4.3.1",
   "@vue/cli-plugin-eslint": "^4.3.1",
   "@vue/cli-service": "^4.3.1",
   "@vue/eslint-config-prettier": "^6.0.0",
   "babel-eslint": "^10.1.0",
   "eslint": "^6.8.0",
   "eslint-plugin-prettier": "^3.3.1",
   "eslint-plugin-vue": "^6.2.2",,
   "prettier": "^1.19.1",

修改.eslintrc.js

  extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],

配置 prettier

在项目根目录下建立一个 prettier 配置文件 .prettierrc

{
  "semi": false,
  "singleQuote": true,
  "printWidth": 80
}

这里代表的是不带分号+单引号
以上都准备玩可以npm i一下，更新node_modules

配置vscode

以上的配置都是为了修改eslint规则，使其更规范统一
都配置完之后运行npm run lint, 就是按此标准做eslint检查了。

还需在vscode上配置，这样每次ctrl+s都自动帮你规范化代码，不用再面对繁琐的eslint报错了。

• 在vscode上搜索setting.json
• 加入：

  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }

• 在 settings.json 配置之后，就可以在 .vue 文件内按 alt + shift + f 格式化按键进行代码格式化。
• 之后每次修改，按ctrl+s也会代码格式化。

可选：加husky

团队开发的话，为了确保提交上去的代码都是规范的，最好加husky插件，提交代码前检测是否通过eslint校验，未通过则不允许提交。
步骤为：

• 加husky第三方库
• 在pre-commit钩子函数执行npm run lint
  具体见前端工程化–commit代码校验配置，其中还提到了怎么在提交代码前校验commit是否规范化

其他

如果只是想给现有项目加prettier，不加eslint
则给vscode安装prettier插件
安装如下包

    "eslint-config-prettier": "^8.2.0",
    "eslint-plugin-prettier": "^3.4.0",

再像上述一样增加.prettier
如上给vscode的setting.json配置
此时ctrl+s即可格式化代码