详解如何在vue项目中使用eslint+prettier格式化代码

来源：动视网责编：小采时间：2020-11-27 22:04:15

详解如何在vue项目中使用eslint+prettier格式化代码

详解如何在vue项目中使用eslint+prettier格式化代码: 对于前端代码风格这个问题一直是经久不衰，每个人都有自己的代码风格，每次看到别人代码一团糟时候我们都会吐槽下。今天给大家介绍如何使用eslint+prettier统一代码风格。对于eslint大家应该比较了解了，是用来校验代码规范的。给大家介绍下prettie

推荐度：

点击下载本文 文档为doc格式

导读详解如何在vue项目中使用eslint+prettier格式化代码: 对于前端代码风格这个问题一直是经久不衰，每个人都有自己的代码风格，每次看到别人代码一团糟时候我们都会吐槽下。今天给大家介绍如何使用eslint+prettier统一代码风格。对于eslint大家应该比较了解了，是用来校验代码规范的。给大家介绍下prettie

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

对于eslint大家应该比较了解了，是用来校验代码规范的。给大家介绍下prettier,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
 }
 ]
}

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

详解如何在vue项目中使用eslint+prettier格式化代码

推荐度：

点击下载本文 文档为doc格式

标签：代码 eslint prettier

热门焦点

详解如何在vue项目中使用eslint+prettier格式化代码

详解如何在vue项目中使用eslint+prettier格式化代码

详解如何在vue项目中使用eslint+prettier格式化代码

最新推荐

猜你喜欢

热门推荐