详解如何在vue项⽬中使⽤eslint+prettier格式化代码
对于前端代码风格这个问题⼀直是经久不衰，每个⼈都有⾃⼰的代码风格，每次看到别⼈代码⼀团糟时候我们都会吐槽下。今天给⼤家介绍如何使⽤eslint+prettier统⼀代码风格。
对于eslint⼤家应该⽐较了解了，是⽤来校验代码规范的。给⼤家介绍下,prettier是⽤来统⼀代码风格，格式化代码的，⽀持js、ts、css、less、scss、json、jsx。并且集成了vscode、vim、webstorm、sublime text插件。
如果你的项⽬中采⽤的是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元素放在最后⼀⾏的末尾，⽽不是单独放在下⼀⾏
html文件格式化"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/f.js",
"start": "npm run dev",
"lint": "eslint --fix --ext .js,.vue src",
"build": "node build/build.js"
},
现在我们就写完代码保存时prettier就会帮我们格式化代码，执⾏npm run lint时eslint会修复⼀些可以修复的规则，其余得规则就需要我们⼿动修复了
如果你的项⽬中使⽤的是standard或airbnd的代码规范、或项⽬中⾃⼰添加了⼀些eslint样式规则，那么我们需要安装⼀些依赖在项⽬中帮助格式化代码
npm i --save-dev prettier eslint-plugin-prettier eslint-config-prettier prettier-eslint-cli
安装eslint-plugin-prettier  配合eslint使⽤prettier，安装eslint-config-prettier禁⽤⼀些eslint和prettier冲突的规则，安装prettier-eslint-cli 使我们可以敲命令格式化代码
在.eslintrc.js  plugin和extends中添加prettier⽀持  rules中添加规则
extends: [
'plugin:vue/essential',
'eslint:recommended',
'plugin:prettier/recommended'
],
// required to lint *.vue files
plugins: ['vue', 'prettier'],
// add your custom rules here
rules: {
'prettier/prettier': 'error',
// allow debugger during development
'no-debugger': v.NODE_ENV === 'production' ? 'error' : 'off'
}
在page.json  script中添加配置执⾏npm run format就可以格式化代码了
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/f.js",
"start": "npm run dev",
"lint": "eslint --fix --ext .js,.vue src",
"build": "node build/build.js",
"format": "prettier-eslint --write \"src/**/*.js\" \"src/**/*.vue\""
},
当我们执⾏npm run format时还会报各种奇怪的错误如：error: Delete ⏎ (prettier/prettier) at src/pages/xxx 等；这是因为prettier配置和编辑器prettier配置冲突导致的在rules中配置下覆盖掉就可以了
"rules": {
"no-console": 0,
"prettier/prettier": [
"error",
{
"singleQuote": true,
"trailingComma": "none",
"bracketSpacing": true,
"jsxBracketSameLine": true
}
]
}
现在我们就可以愉快的编码了
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。