实例详解Vue项目使用eslint + prettier规范代码风格


Posted in Javascript onAugust 20, 2018

团队开发的项目,如果没有对代码风格作要求,有多少团队成员,就当然会出现多少种不同的代码风格。因此,我们需要一种能够统一团队代码风格的工具,作为强制性的规范,统一整个项目的代码风格。

幸好,我们有 eslint 和 prettier 。

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

module.exports = {
 dev: {
  useEslint: true, 
 }
}

// webpack.base.conf.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

//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)
};

需要在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
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规范代码风格,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery ui dialog里调用datepicker的问题
Aug 06 Javascript
js实现获取焦点后光标在字符串后
Sep 17 Javascript
javascript实现10个球随机运动、碰撞实例详解
Jul 08 Javascript
JavaScript实现获得所有兄弟节点的方法
Jul 23 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
Jan 28 Javascript
jQuery获取元素父节点的方法
Jun 21 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
Dec 18 Javascript
图片加载完成再执行事件的实例
Nov 16 Javascript
bootstrap datetimepicker控件位置异常的解决方法
Nov 23 Javascript
详解webpack 热更新优化
Sep 13 Javascript
js删除数组中某几项的方法总结
Jan 16 Javascript
详解阿里Node.js技术文档之process模块学习指南
Jan 04 Javascript
解决jquery有正确返回值但不执行success函数的问题
Aug 20 #jQuery
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
Aug 20 #Javascript
Vue2.0生命周期的理解
Aug 20 #Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
Aug 20 #Javascript
RequireJS用法简单示例
Aug 20 #Javascript
JavaScript实现多态和继承的封装操作示例
Aug 20 #Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
Aug 20 #Javascript
You might like
关于php 高并发解决的一点思路
2017/04/16 PHP
浅谈php://filter的妙用
2019/03/05 PHP
Laravel使用swoole实现websocket主动消息推送的方法介绍
2019/10/20 PHP
prototype 的说明 js类
2006/09/07 Javascript
Prototype RegExp对象 学习
2009/07/19 Javascript
(function($){...})(jQuery)的意思
2010/07/22 Javascript
将input file的选择的文件清空的两种解决方案
2013/10/21 Javascript
异步动态加载JS并运行(示例代码)
2013/12/13 Javascript
js中substring和substr的定义和用法
2014/05/05 Javascript
JavaScript中标识符提升问题
2015/06/11 Javascript
js enter键激发事件实例代码
2016/08/17 Javascript
JavaScript SHA1加密算法实现详细代码
2016/10/06 Javascript
JavaScript面试题(指针、帽子和女朋友)
2016/11/23 Javascript
详解Vue整合axios的实例代码
2017/06/21 Javascript
js链表操作(实例讲解)
2017/08/29 Javascript
Node.js实现连接mysql数据库功能示例
2017/09/15 Javascript
Javascript和jquery在selenium的使用过程
2019/10/31 jQuery
如何区分vue中的v-show 与 v-if
2020/09/08 Javascript
python网页请求urllib2模块简单封装代码
2014/02/07 Python
python Flask实现restful api service
2017/12/04 Python
利用Python如何实现一个小说网站雏形
2018/11/23 Python
.img/.hdr格式转.nii格式的操作
2020/07/01 Python
英国护肤品购物网站:Beauty Expert
2016/08/19 全球购物
销售总监工作职责
2013/11/21 职场文书
活动策划邀请函
2014/02/06 职场文书
竞争与合作演讲稿
2014/05/12 职场文书
学校校庆演讲稿
2014/05/22 职场文书
园林系毕业生求职信
2014/06/23 职场文书
小学综合实践活动总结
2014/07/07 职场文书
党的群众路线教育实践活动对照检查材料范文
2014/09/24 职场文书
2015年七一建党节演讲稿
2015/03/19 职场文书
校车司机安全责任书
2015/05/11 职场文书
2015年财务人员个人工作总结
2015/07/27 职场文书
2016年母亲节寄语
2015/12/04 职场文书
Python通过m3u8文件下载合并ts视频的操作
2021/04/16 Python
梳理总结Python开发中需要摒弃的18个坏习惯
2022/01/22 Python