实例详解Vue项⽬使⽤eslint+prettier规范代码风格
团队开发的项⽬，如果没有对代码风格作要求，有多少团队成员，就当然会出现多少种不同的代码风格。因此，我们需要⼀种能够统⼀团队代码风格的⼯具，作为强制性的规范，统⼀整个项⽬的代码风格。
幸好，我们有 eslint 和 prettier 。
git使用详解eslint VS prettier
应该⼤多数项⽬都已经采⽤eslint来对代码进⾏质量检查，可能少部分还会采⽤其进⾏⼀定程度上的统⼀风格。那为什么还需要prettier呢？我们先来对它们作⼀个简单的了解。
各种linters
总体来说，linters有两种能⼒：
1. 检查代码质量，⽐如是否有已定义但未使⽤的变量，或者使⽤函数式编程的函数是否产⽣副作⽤等。
2. 检查代码风格，⽐如每⾏的最⼤长度，或者是否使⽤拖尾逗号等。
其中，eslint⽂档中，带扳⼿图标的规则就是eslint能够⾃动修复的规则。⽽不带该图标的规则，eslint则只
能给出错误或警告，随后由开发者⼈⼯修复。
prettier
pretter没有对代码的质量进⾏检查的能⼒，其只会对代码风格按照指定的规范进⾏统⼀，避免⼀个项⽬中出现多种不同的代码风格。
项⽬配置
此处使⽤vue项⽬作为例⼦
⼀、⾸先配置eslint
如果⼤家的项⽬是使⽤vue cli⽣成的，并且选择使⽤eslint的话，那么默认在项⽬根⽬录下就会⽣成.eslintrc.js。如果没有，也可以在项⽬根⽬录下创建该⽂件以及.eslintignore⽂件
此处我使⽤eslint-plugin-vue，选择的是vue/strongly-recommended规则。
npm install --save-dev eslint eslint-plugin-vue@next
// .eslintrc.js
extends: {
'plugin:vue/strongly-recommended'
}
// .eslintignore
/build/
/config/
/dist/
/*.js
/test/unit/coverage/
如果希望在重新编译的时候eslint⾃动修复代码，需要在webpack配置中加⼊eslint，并且设置 fix: true ，并且在devserver中开启eslint。
// config/index.js
dev: {
useEslint: true,
}
}
// f.js
const createLintingRule = () => ({
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter'),
emitWarning: !config.dev.showEslintErrorsInOverlay,
fix: true,
}
})
⼆、配置prettier
由于使⽤eslint，并不能最⼤程度地统⼀代码风格，因此我们需要引⼊prettier。
npm install --save-dev prettier
按照实际需要配置prettier
//fig.js
"printWidth": 80, // 每⾏代码长度（默认80）
"tabWidth": 2, // 每个tab相当于多少个空格（默认2）
"useTabs": false, // 是否使⽤tab进⾏缩进（默认false）
"singleQuote": true, // 使⽤单引号（默认false）
"semi": true, // 声明结尾使⽤分号(默认true)
"trailingComma": "all", // 多⾏使⽤拖尾逗号（默认none）
"bracketSpacing": true, // 对象字⾯量的⼤括号间使⽤空格（默认true）
"jsxBracketSameLine": false, // 多⾏JSX中的>放置在最后⼀⾏的结尾，⽽不是另起⼀⾏（默认false）
"arrowParens": "avoid" // 只有⼀个参数的箭头函数的参数是否带圆括号（默认avoid）
};
需要在package.json⾥⾯配置调⽤prettier进⾏格式化的命令
// package.json
"scripts": {
"format": "prettier --write \"src/**/*.js\" \"src/**/*.vue\"",
}
⾄此，可以在命令⾏中输⼊npm run format对代码进⾏格式化了。
配置husky和lint-staged
由于直接使⽤prettier进⾏代码格式化仍存在⼀些弊端，例如：
⼀次性对所有⽂件进⾏格式化，如果是项⽬中途加⼊prettier，会对⼀些早已经编写完成的代码进⾏格式化，可能会造成冲突或者⼀些不可预知的问题，降低项⽬稳定性。
每次都要键⼊npm run format进⾏代码格式化，多了额外的操作，开发体验不良好。
故此，我们可以修改代码格式化的时机，仅对本次提交的代码进⾏格式化，并且在代码提交之前进⾏格式化，确保存⼊仓库的代码都是格式化后的良好的代码。
husky是⼀款可以帮助我们使⽤git hooks的第三⽅库，可以根据package.json⽂件⾥定义的钩⼦和钩⼦执⾏的命令将要执⾏的操作写对应的钩⼦脚本⾥。
lint-staged，官⽅说明是⼀款可以对git提交的代码使⽤linter的第三⽅库，其依赖于husky使⽤git hooks。此处我们不仅仅可以利⽤其调⽤linters，还可以调⽤prettier对代码进⾏格式化。
npm install --save-dev lint-staged husky
// package.json
"scripts": {
"precommit": "lint-staged" // precommit钩⼦执⾏lint-staged
},
"lint-staged": {
"src/**/*.{js,json,css,vue}": [
"prettier --write", // 先执⾏prettier，再执⾏eslint，保证代码质量
"eslint --fix",
"git add"
]
},
同时使⽤eslint和prettier的配置
由于需要同时使⽤prettier和eslint，⽽prettier的⼀些规则和eslint的⼀些规则可能存在冲突，所以需要将eslint的⼀些可能与prettier发⽣冲突的代码格式化规则关闭。这⾥使⽤eslint-plugin-prettier和eslint-config-prettier。
eslint-plugin-prettier可以将prettier的规则设置为eslint的规则，对不符合规则的进⾏提⽰。（与eslint-plugin-vue相同）eslint-config-prettier可以关闭eslint可能与prettier发⽣冲突的代码格式化规则。官⽅称eslint-plugin-prettier需要与eslint-config-prettier搭配⾷⽤才能获得最佳效果。
npm install --save-dev eslint-plugin-prettier eslint-config-prettier
// .eslintrc.js
extends: [
'plugin:vue/strongly-recommended',
'plugin:prettier/recommended'
]
rules: {
"prettier/prettier": "error"
}
}
经过上述配置，每次git commit的时候，都会先执⾏prettier以及eslint对代码进⾏格式化和质量检查，确保代码没有问题之后再提交
整体配置⽂件
npm install -D prettier husky lint-staged eslint-config-prettier eslint-plugin-prettier
// package.json
{
"scripts": {
"format": "prettier --write \"src/**/*.js\" \"src/**/*.vue\"",
"precommit": "lint-staged"
},
"lint-staged": {
"src/**/*.{js,json,css,vue}": [
"prettier --write",
"eslint --fix",
"git add"
]
},
"devDependencies": {
"eslint": "^4.15.0",
"eslint-config-prettier": "^2.9.0",
"eslint-plugin-prettier": "^2.6.2",
"eslint-plugin-vue": "^4.0.0",
"husky": "^0.14.3",
"lint-staged": "^7.2.0",
"prettier": "^1.14.2",
},
}
// eslintrc.js
// /docs/user-guide/configuring
extends: [
'plugin:vue/strongly-recommended',
'plugin:prettier/recommended'
],
/
/ add your custom rules here
rules: {
// ...other codes
"prettier/prettier": "error"
}
}
//fig.js
"printWidth": 80, // 每⾏代码长度（默认80）
"tabWidth": 2, // 每个tab相当于多少个空格（默认2）
"useTabs": false, // 是否使⽤tab进⾏缩进（默认false）
"singleQuote": true, // 使⽤单引号（默认false）
"semi": true, // 声明结尾使⽤分号(默认true)
"trailingComma": "all", // 多⾏使⽤拖尾逗号（默认none）
"bracketSpacing": true, // 对象字⾯量的⼤括号间使⽤空格（默认true）
"jsxBracketSameLine": false, // 多⾏JSX中的>放置在最后⼀⾏的结尾，⽽不是另起⼀⾏（默认false）
"arrowParens": "avoid" // 只有⼀个参数的箭头函数的参数是否带圆括号（默认avoid）
};
写在最后
⼀般IDE集成了eslint或者prettier⼯具的话，会默认根据项⽬根⽬录下相关配置⽂件进⾏代码检查。
如果使⽤vscode，vetur的默认代码风格化使⽤的就是prettier，会⾃动检索项⽬根⽬录下的prettier配置⽂件进⾏格式化。eslint 检索⼯具推荐使⽤eslint插件，安装后也会⾃动检索eslint配置⽂件进⾏代码检查，⾮常⽅便。
总结
以上所述是⼩编给⼤家介绍的Vue项⽬使⽤eslint + prettier规范代码风格，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！

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