由于需要同时使用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 module.exports = { 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 // https://eslint.org/docs/user-guide/configuring module.exports = { extends: [ 'plugin:vue/strongly-recommended', 'plugin:prettier/recommended' ], // add your custom rules here rules: { // ...other codes "prettier/prettier": "error" } } //prettier.config.js module.exports = { "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规范代码风格，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: