本文主要包括两点：
- 大家协同开发代码各异，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即可格式化代码
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
