快捷搜索:
来自 新京葡娱乐场网址 2019-08-11 12:08 的文章
当前位置: 67677新澳门手机版 > 新京葡娱乐场网址 > 正文

运用eslint和editorconfig标准代码

(二)关于为什么要用 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中的插件以及相关配置

2. WebStorm 2017.3 和更早的版本

这个版本有2种情况:

  • ①是eslint 模式,使用 eslint-plugin-prettier 插件和启用eslint 插件配合,这里相当于使用 eslint 模块来驱动 prettier 模块,然后中间驱动则是靠eslint-plugin-prettier

首先启用 eslint,并且配置 eslint 模块位置,默认会自动读取当前目录的 eslint.rc 配置文件,然后需要进行 npm 安装eslint-plugin-prettier这个插件,后面再统一说明。

图片 1
图片 2

  • ②是直接使用 prettier 作为额外工具来使用。
    图片 3图片 4图片 5
    图片 6上面两种方式的默认快捷键都是Cmd/Ctrl-Shift-A(在 mac 下是comm shift A),觉得不舒服,按需修改快捷键即可。

配置控制台的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 和 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配合git

为了最大程度控制每个人的规范,我们可以在git commit代码的时候,使用git hook调用eslint进行代码规范验证,不规范的代码无法提交到仓库。

  1. 安装husky (哈士奇:D)
npm i husky -D
  1. 修改package.json的scripts
"scripts": {
  ...
  "lint": "eslint --ext .js --ext .jsx client/",
  "precommit": "npm run lint"
}

precommit是一个钩子,当执行git commit的时候,只有通过了precommit才能够执行成功(注意,此时的eslint是在控制台通过全局命令eslint运行的,所以之前需要全局安装eslint以及依赖插件(第0步)。

(三)安装webstorm 的eslint 插件和 prettier 插件并启用插件

更多配置方式参考:WebStorm Setup · Prettier

根据官方介绍webstorm 分别有2种处理:

  1. WebStorm 2018.1 和以上的版本
  2. WebStorm 2017.3 和更早的版本

如果用IntelliJ IDEA, PhpStorm, PyCharm, and other JetBrains IDEs, 则需要安装prettier插件和 eslint 插件,而webstorm 的话默认会帮你安装上,这也是推荐 webstorm 的原因。

为什么要使用这些

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

大纲

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

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

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

二、解决办法

旧有的解决办法是:

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

新的解决办法是:

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

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

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 文件,如下图所示:

图片 7

.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,你就会发现一大堆报错信息

图片 8

报错信息

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

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

1. WebStorm 2018.1 和以上的版本

官方默认已经集成了 prettier 支持,只需要配置好一个全局的 prettier 模块调用方式就可以使用了(必须配置)。图片 9

图片 10

快捷键是:Alt-Shift-Cmd-P on macOS or Alt-Shift-Ctrl-P on Windows and Linux

氪金王的好处,升级快,支持快,免破解,省心省力不省钱!

eslint

(三) 配置 eslint 插件和 prettier插件

editorconfig

不同编辑器对文本的格式会有一定的区别,如果不统一一些规范,可能你跟别人合作的时候,每次更新下来别人的代码就会一大堆报错。

诸如:indent_style/indet_size/charset/end_of_line/insert_final_newline/trim_trailing_whitespace等等差异都会造成问题。

  1. 安装插件(webstorm跳过) 此处以VS Code为例

    去商店中搜索 EditorConfig for VS Code进行安装,这样VS Code就会优先根据项目根目录的.editorconfig文件对缩进之类风格进行配置,覆盖VS Code默认配置。

    EditorConfig 插件会从文件所在目录开始逐级向上查找 .editorconfig,直到到达根目录或者找到包含属性 root=true 的 .editorconfig 文件为止。

    当找到所有满足条件的 .editorconfig 配置文件后,插件会读取这些配置文件的内容,距离文件路径最短的配置文件中的属性优先级最高,同一个文件按照从上到下方式读取,底部定义的同名属性优先级要高于顶部定义的。

    大部分编辑器都有这个插件,即使团队成员使用不同的IDE,也可以很好的统一代码风格。

    只要保证.editorconfig这个文件一直即可。

  2. 在项目根目录新建 .editorconfig

图片 11

editorconfig

  1. 编写配置文件
root = true                     // 表示当前是项目根目录

[*]                             // 所有文件都使用配置
charset = utf-8                 // 编码格式
indent_style = space            // Tab键缩进的样式,由space和table两种 一般代码中是space
indent_size = 2                 // 缩进size为2
end_of_line = lf                // 以lf换行 默认win为crlf mac和linux为lf
insert_final_newline = true     // 末尾加一行空行
trim_trailing_whitespace = true // 去掉行尾多余空格

注: 如果发现IDE自动的格式化与eslint规则造成了冲突,记得自己去更改格式化规则。

在VS Code中,点击 文件>首选项>设置

在搜索框中输入“eslint.autoFixOnSave”

别忘了先在扩展商店安装好"ESLint"这个插件哦。

这样的话无需自己手动格式化,保存的时候便格式化成功了,如果出现错误还会出现波浪线友好提示。

小tip:如果有一些规则我不想设置完全失效,但是的确有一行代码我不能让他检查怎么办?

答: 在该代码后面添加注释

import App from './App.jsx'; // eslint-disable-line

更多学习请参考官方文档:

  1. ESlint 官方网站:https://eslint.org/
  2. editorconfig 官方网站: http://editorconfig.org/

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

2018/06/11 · JavaScript · 格式化

原文出处: Edwin   


本文由67677新澳门手机版发布于新京葡娱乐场网址,转载请注明出处:运用eslint和editorconfig标准代码

关键词: