金沙澳门官网网址采用eslint和editorconfig标准代码

作者: 前端知识  发布:2019-08-15

梳理前端开发使用eslint和prettier来检查和格式化代码问题

2018/06/11 · JavaScript · 格式化

原文出处: Edwin   


一、问题痛点

  • 在团队的项目开发过程中,代码维护所占的时间比重往往大于新功能的开发。因此编写符合团队编码规范的代码是至关重要的,这样做不仅可以很大程度地避免基本语法错误,也保证了代码的可读性。
  • 对于代码版本管理系统(svn 和 git或者其他),代码格式不一致带来的问题是严重的,在代码一致的情况下,因为格式不同,触发了版本管理系统标记为 diff,导致无法检查代码和校验。

但是需要知道的是,开发规范不仅仅包含代码格式规范,还有很多内容,这里只是单独说明代码格式化规范而已。

title: 使用eslint和editorconfig规范代码
date: 2018-01-17
tags: [eslint]
categories: 环境配置

(一)关于代码格式规范问题

代码格式规范的标准可以参考各大主流公司和社区,以下都是一些常用主流规范:

  • 前端开发规范之命名规范、html规范、css规范、js规范 – 腾讯Web前端 IMWeb 团队社区 | blog | 团队博客 腾讯的
  • 编写「可读」代码的实践 | Taobao FED | 淘宝前端团队 淘宝的
  • GitHub – airbnb/javascript: JavaScript Style Guide airbnb 的
  • google 的
  • vue 的

参考别人的规范,制定适合自己团队使用的规范,太过复杂的规范执行起来太麻烦,太过简单的规范不如没有规范。

没有绝对的规范,只有适合的规范!


(二)关于为什么要用 eslint 和 prettier问题

  • prettier 主要是为了格式化代码,而在没有 prettier 之前,是用 eslint —fix和 编辑器自带代码格式来进行代码格式化的。
    • 缺点:每种编辑器会有不一样的代码格式,而且配置会比较麻烦。
    • prettier 已经逐渐成为业界主流的代码风格格式化工具。
    • 减轻 eslint 等工具的校验规则,因为将代码样式校验交给了 prettier,所以可以将代码校验的规则更准确地应用到代码真正的规范上面。
  • eslint 是主要还是负责代码规则校验,prettier 只调整代码风格,代码样式,eslint 才是真正检查代码是否符合规范的工具。

所以两者是需要配合使用的。

使用eslint和editorconfig规范代码

该文章总结自:慕课网: Webpack React全栈工程架构项目实战精讲

参考:
vue项目配置eslint(附visio studio code配置)

VS Code里面怎么根据eslint来格式化代码?-刘祺的回答

VS Code中的插件以及相关配置

二、解决办法

旧有的解决办法是:

  • 使用 editorconfig 协助兼容开发工具的代码格式化。
  • 使用 eslint 检查代码
  • 使用 eslint —fix来修复不符合 eslint 规则的代码,它会自动根据设置的规则来改变代码(它会包含代码样式的规则,但是 eslint 的样式规则并不太准确)。
  • 手动修改剩下的有问题的地方,或者有些地方很难用规则来判断的时候,就需要手动修改。

新的解决办法是:

  • 使用 editorconfig 协助兼容开发工具的代码格式化。
  • 使用 eslint 检查代码。
  • 使用 prettier 格式化代码。(可以理解为prettier是 eslint —fix 的加强版,用 prettier 来代替 eslint-fix
  • 手动修改剩下的有问题的地方,或者有些地方很难用规则来判断的时候,就需要手动修改。

咋一看,其实没啥区别,甚至可能发现新解决办法会更加麻烦了一些,其实步骤上确实如此,但是真正操作上,会减轻 eslint 的规则编写,也会减少很多手动修改样式的地方,格式化后的代码会更加美观,耐看。

为什么要使用这些

  1. 规范代码有利于团队协作
  2. 纯手工规范费时费力且不能保证准确性
  3. 能配合编辑器自动提醒错误,提高开发效率

三、具体操作

鉴于网上文章说明的比较混乱,这里主要是为了梳理整个流程和思路。

eslint

大纲

  1. 统一团队使用的开发工具(webstorm,ide 编辑器)
  2. 安装 eslint 和 prettier (node 模块)
  3. 安装 eslint 和 prettier ( ide 编辑器的插件)
  4. 配置 eslint 和 prettier
  5. 配置 editorconfig (可选)
  6. 严格督查,按照流程检查和格式化代码,按照规范和要求进行代码提交。

这里多了一步是安装 eslint 和 prettier ( ide 编辑器的插件),主要就是利用 ide 编辑器做代码格式错误提醒和代码格式处理,这个操作也可以使用 webpack 打包的时候来做,也可以使用 gulp 或者 npm 来做,但这里借助编辑器会更方便。

eslint是什么

elint是随着ECMAScript版本一直更新的Js lint工具,插件丰富,并且能够套用规范,规则非常丰富,能够满足大部分团队的需求。

(一)统一团队使用的开发工具(webstorm,ide 编辑器)

开发工具可以做很多东西,是开发代码的利器,但是不同的开发工具会有不同的代码提示,代码格式化,代码检查的机制,这样的差异化会对团队代码规范(开发和检查)带来很多问题,所以需要统一。

当然,如果个人不愿意更换自己用惯的开发工具的话,也没关系,只要能够做到跟团队的开发规范保持一致也是可以的,但个人觉得,这样难度比较大,毕竟开发工具和团队的开发规范不那么容易融合。

这里只说明前端业界目前最常用的开发工具来做例子 webstorm 。

eslint的使用

  1. 全局安装eslint及其依赖
npm i eslint -g

npm i babel-eslint 
eslint-config-airbnb 
eslint-loader 
eslint-plugin-import 
eslint-plugin-jsx-a11y 
eslint-plugin-node 
eslint-plugin-promise 
eslint-plugin-react -g
  1. 在项目中安装eslint及其依赖
npm i eslint -D

npm i babel-eslint 
eslint-config-airbnb 
eslint-loader 
eslint-plugin-import 
eslint-plugin-jsx-a11y 
eslint-plugin-node 
eslint-plugin-promise 
eslint-plugin-react -D
  1. 在项目根目录下新建 .eslintrc 文件,如下图所示:

金沙澳门官网网址 1

.eslintrc文件

  1. 编写规则
{
  "parser": "babel-eslint", // 使用babel-eslint而非eslint自带的parser
  "env": {
    "browser": true,        // 代码执行环境: 浏览器 可以使用window的环境变量
    "es6": true,
    "node": true            // 可以使用node的一些环境变量
  },
  "parserOptions": {
    "ecmaVersion": 6,       // ecma语言版本
    "sourceType": "module"
  },
  "extends": "airbnb",      // 继承airbnb规范
  "rules": {
    "semi": [0],             // 不检测分号 0 = off, 1 = warn, 2 = error
    "react/jsx-filename-extension": [0] // 允许在js文件中编写jsx
  }
}
  1. 配置webpack
{
  enforce: 'pre',           // 在webpack编译之前进行检测
  test: /.(js|jsx)$/,
  loader: 'eslint-loader',
  exclude: [                // 除去node_modules
    path.resolve(__dirname, '../node_modules')
  ]
},
  1. 启动webpack,你就会发现一大堆报错信息

金沙澳门官网网址 2

报错信息

一个一个找吧,考验耐心的时刻,原来我脾气这么好 :P

如果不知道错误是什么意思,看见报错后面的灰色字体吗,那个就是规则名,copy一下去eslint rule查看规则详情。

(二)安装 eslint 和 prettier (node 模块)

安装这个模块的意义在于,实际上,整个流程最核心就是这个地方,开发工具虽然支持了这2个模块,但是最终运行是必须要以这2个模块安装好才能使用的。

JavaScript

// 这里需要全局安装最主要的两个node 模块,主要是要让 ide 编辑器能够读取全局环境来调用这2个模块 npm install eslint prettier -g --save-dev // 这个是为了 eslint 跟 prettier 可以联合使用 npm install --save-dev eslint-plugin-prettier // 这个是为了让 eslint 跟 prettier 兼容,关闭 prettier 跟 eslint 冲突的rules npm install --save-dev eslint-config-prettier

1
2
3
4
5
6
7
// 这里需要全局安装最主要的两个node 模块,主要是要让 ide 编辑器能够读取全局环境来调用这2个模块
npm install eslint prettier -g --save-dev
 
// 这个是为了 eslint 跟 prettier 可以联合使用
npm install --save-dev eslint-plugin-prettier
// 这个是为了让 eslint 跟 prettier 兼容,关闭 prettier 跟 eslint 冲突的rules
npm install --save-dev eslint-config-prettier

补充备注:

  • eslint-config-prettier :
    • 这个插件是如果eslint的规则和prettier的规则发生冲突的时候(主要是不必要的冲突),例如eslint 限制了必须单引号,prettier也限制了必须单引号,那么如果用 eslint 驱动 prettier 来做代码检查的话,就会提示2种报错,虽然他们都指向同一种代码错误,这个时候就会由这个插件来关闭掉额外的报错。
    • 但如果是eslint 只负责检测代码,prettier 只负责格式化代码,那么他们之间互不干扰,也就是说,也是可以不安装这个插件的,但是因为团队的人员的差异性(即使同一个开发工具也有版本差异,也有使用 prettier 和 eslint 的差异),可能有存在各种情况,所以最好还是安装上这个插件。
    • 官方有详细介绍:GitHub – prettier/eslint-config-prettier: Turns off all rules that are unnecessary or might conflict with Prettier.

模块参考信息:Integrating with ESLint · Prettier

以下顺便说一下其他我们常用到的eslint 模块:

JavaScript

npm -g install babel-eslint eslint-plugin-html --save-dev

1
npm -g install babel-eslint eslint-plugin-html --save-dev
  • babel-eslint :
    • 有些代码是没被 eslint 支持的(因为 babel 也是负责这种事情,转译不被支持的 js 语法),所以需要加上这个插件来保持兼容性。
    • 官方有详细介绍:
  • eslint-plugin-html:
    • 为了让eslint 可以检查.vue文件的代码。

配置控制台的eslint检测环境

如果你想在控制台查看项目中所有的warning 和 error,即手动在控制台通过eslint命令进行代码检测,就需要保证依赖包都在全局环境目录下安装。

然后执行

eslint --ext .js --ext .jsx client/

命令即可。

--ext用来指定检测的文件格式,client/是检测的目录。

也可以给该指令提供一个更好记的别名,编辑package.json,在script属性中新增一条。即可通过 npm run lint来检测项目中的warning 和 error了。

"scripts": {
   "lint": "eslint --ext .js --ext .jsx client/"
 },

如何给项目配置eslint到这里就讲完了,最后说下问什么要在全局环境下安装依赖包吧。

只有全局环境下安装了eslint才能执行 eslint --init 和 eslint --ext .js,.vue src 等eslint指令。
当项目执行eslint检测时,会先检测全局环境下有没有eslint,显然文章第一步就是在全局安装了,那么全局环境下的eslint引用依赖包时也只会在全局环境下查找。
如果你现在或之后不需要给项目初始化一个eslint配置,也不需要在控制台输出所有的warning和error,那么就不要全局环境下的eslint。执行 npm configs 查看全局环境下的包的安装路径,如果发现有eslint就删掉好了。
[这一段摘自简书]

上面文章中评论有一位朋友说道:“eslint不一定需要全局安装
本地安装的话可以通过./node_modules/.bin/eslint --init来运行”

不愿意全局安装诸多依赖包的同学可以一试。

注:上面是指命令行启动eslint。倘若通过npm scripts启动eslint,无需全局安装,命令也不需要加上路径前缀,npm会自动寻找本地项目依赖eslint

本文由金沙澳门官网发布于前端知识,转载请注明出处:金沙澳门官网网址采用eslint和editorconfig标准代码

关键词: 金沙澳门官网