在vscode中使用eslint+prettier格式化vue项目代码

对于前端代码风格这个问题一直是经久不衰，每个人都有自己的代码风格，每次看到别人代码一团糟时候我们都会吐槽下。今天给大家介绍如何使用eslint+prettier统一代码风格。

对于eslint大家应该比较了解了，是用来校验代码规范的。给大家介绍下prettier,prettier是用来统一代码风格，格式化代码的，支持js、ts、css、less、scss、json、jsx

如果你的项目中采用的是ellint默认规则并且没有添加别的规则、没有使用standard或airbnb得风格，你可以下载编辑器插件直接保存代码时自动格式化。

  以vscode为例：搜索插件  Eslint、vuter、prettier-code安装，在编辑器首选项   配置中修改配置

//由于prettier不能格式化vue文件template 所以使用js-beautify-html格式化

"vetur.format.defaultFormatter.html": "js-beautify-html", 
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned" //属性强制折行对齐
}
},
"eslint.autoFixOnSave": true, //保存时使用自动格式化
"eslint.validate": [ //验证文件类型
"javascript",
"javascriptreact",
"vue",
"html",
"jsx",
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
}
],
"prettier.singleQuote": true, //使用单引号而不是双引号
"prettier.jsxBracketSameLine": true, //将>多行JSX元素放在最后一行的末尾，而不是单独放在下一行
"editor.formatOnSave": true, //保存时自动格式化

​
然后在eslint配置文件.eslintrc extends添加 eslint:recommended

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

在page.json文件 scripts 中lint里面添加--fix   当执行npm run lint时eslint会帮你修复一些可以自动修复得规则

"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --fix --ext .js,.vue src",
"build": "node build/build.js"
},

现在我们就写完代码保存时prettier就会帮我们格式化代码，执行npm run lint时eslint会修复一些可以修复的规则，其余得规则就需要我们手动修复了
---------------------
作者：木子_L
来源：CSDN
原文：https://blog.csdn.net/ljt123456765/article/details/81356792