详解如何在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元素放在最后⼀⾏的末尾，⽽不是单独放在下⼀⾏ \"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会修复⼀些可以修复的规则，其余得规则就需要我们⼿动修复了

如果你的项⽬中使⽤的是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': process.env.NODE_ENV === 'production' ? 'error' : 'off' }

在page.json script中添加配置 执⾏npm run format就可以格式化代码了

\"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\

\"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 } ]}

现在我们就可以愉快的编码了

以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。