实例详解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 相关文章推荐
TinyMCE 新增本地图片上传功能
Nov 05 Javascript
关于firefox的ElementTraversal 接口 使用说明
Nov 11 Javascript
Javascript基础知识(一)核心基础语法与事件模型
Sep 29 Javascript
Node.js异步I/O学习笔记
Nov 04 Javascript
基于jquery编写分页插件
Mar 07 Javascript
浅谈js中调用函数时加不加括号的问题
Jul 28 Javascript
JavaScript表单验证的两种实现方法
Feb 11 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
Mar 21 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
Sep 17 Javascript
vue项目中实现图片预览的公用组件功能
Oct 26 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
Aug 08 Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
Oct 28 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 win下Socket方式发邮件类
2009/08/21 PHP
关于zend studio 出现乱码问题的总结
2013/06/23 PHP
PHP采用超长(超大)数字运算防止数字以科学计数法显示的方法
2016/04/01 PHP
jQuery 一个图片切换的插件
2011/10/09 Javascript
document节点对象的获取方式示例介绍
2013/12/24 Javascript
在页面上用action传递参数到后台出现乱码的解决方法
2013/12/31 Javascript
什么是 AngularJS?AngularJS简介
2014/12/06 Javascript
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
2015/03/24 Javascript
谈谈Jquery中的children find 的区别有哪些
2015/10/19 Javascript
javascript字符串替换函数如何一次性全部替换掉
2015/10/30 Javascript
浅析JS运动
2015/12/28 Javascript
解决node.js安装包失败的几种方法
2016/09/02 Javascript
JS正则表达式验证密码格式的集中情况总结
2017/02/23 Javascript
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
详解AngularJS ng-class样式切换
2017/06/27 Javascript
详解Webpack DLL用法以及功能
2017/07/11 Javascript
BootStrap 页签切换失效的解决方法
2017/08/17 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
2018/01/02 Javascript
微信小程序中显示倒计时代码实例
2019/05/09 Javascript
JS简易计算器实例讲解
2020/06/30 Javascript
Python爬虫之网页图片抓取的方法
2018/07/16 Python
关于Python内存分配时的小秘密分享
2019/09/05 Python
详解centos7+django+python3+mysql+阿里云部署项目全流程
2019/11/15 Python
TensorFlow查看输入节点和输出节点名称方式
2020/01/04 Python
python中Ansible模块的Playbook的具体使用
2020/05/28 Python
python实现逻辑回归的示例
2020/10/09 Python
Python爬虫之Selenium警告框(弹窗)处理
2020/12/04 Python
HTML5如何使用SVG的方法示例
2019/01/11 HTML / CSS
戴森比利时官方网站:Dyson BE
2020/10/03 全球购物
台湾屈臣氏网路商店:Watsons台湾
2020/12/29 全球购物
英语硕士生求职简历的自我评价
2013/10/15 职场文书
“三支一扶”支教教师思想汇报
2014/09/13 职场文书
企业员工辞职信范文
2015/05/12 职场文书
严以律己专题学习研讨会发言材料
2015/11/09 职场文书
《西门豹》教学反思
2016/02/23 职场文书
MongoDB balancer的使用详解
2021/04/30 MongoDB