详解如何在vue项目中使用eslint+prettier格式化代码
对于前端代码风格这个问题一直是经久不衰，每个人都有自己的代码风格，每次看到别人代码一团糟时候我们都会吐槽下。今天给大家介绍如何使用eslint+prettier统一代码风格。
对于eslint大家应该比较了解了，是用来校验代码规范的。给大家介绍下prettier,prettier是用来统一代码风格，格式化代码的，支持js、ts、css、less、scss、json、jsx。并且集成了vscode、vim、webstorm、sublimetext插件。
如果你的项目中采用的是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配置文件.eslintrcextends添加eslint:recommended
extends:[ 'plugin:vue/essential', 'eslint:recommended' ],
在page.json文件scripts中lint里面添加--fix 当执行npmrunlint时eslint会帮你修复一些可以自动修复得规则
"scripts":{
"dev":"webpack-dev-server--inline--progress--configbuild/webpack.dev.conf.js",
"start":"npmrundev",
"lint":"eslint--fix--ext.js,.vuesrc",
"build":"nodebuild/build.js"
},
现在我们就写完代码保存时prettier就会帮我们格式化代码，执行npmrunlint时eslint会修复一些可以修复的规则，其余得规则就需要我们手动修复了
如果你的项目中使用的是standard或airbnd的代码规范、或项目中自己添加了一些eslint样式规则，那么我们需要安装一些依赖在项目中帮助格式化代码
npmi--save-devprettiereslint-plugin-prettiereslint-config-prettierprettier-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'
],
//requiredtolint*.vuefiles
plugins:['vue','prettier'],
//addyourcustomruleshere
rules:{
'prettier/prettier':'error',
//allowdebuggerduringdevelopment
'no-debugger':process.env.NODE_ENV==='production'?'error':'off'
}
在page.json script中添加配置 执行npmrunformat就可以格式化代码了
"scripts":{
"dev":"webpack-dev-server--inline--progress--configbuild/webpack.dev.conf.js",
"start":"npmrundev",
"lint":"eslint--fix--ext.js,.vuesrc",
"build":"nodebuild/build.js",
"format":"prettier-eslint--write\"src/**/*.js\"\"src/**/*.vue\""
},
当我们执行npmrunformat时还会报各种奇怪的错误如：error:Delete⏎(prettier/prettier)atsrc/pages/xxx等；这是因为prettier配置和编辑器prettier配置冲突导致的 在rules中配置下覆盖掉就可以了
"rules":{
"no-console":0,
"prettier/prettier":[
"error",
{
"singleQuote":true,
"trailingComma":"none",
"bracketSpacing":true,
"jsxBracketSameLine":true
}
]
}
现在我们就可以愉快的编码了
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。