在项目中使用ESLint与Prettier
栏目: JavaScript · 发布时间: 5年前
内容简介:两者分工不同,所以需要配合使用。安装 eslint 和 prettier ( ide 编辑器的插件),主要就是利用 ide 编辑器做代码格式错误提醒和代码格式处理,这个操作也可以使用 webpack 打包的时候来做,也可以使用 npm 来做,但这里借助编辑器会更方便。开发工具可以做很多东西,是开发代码的利器,但是不同的开发工具会有不同的代码提示,代码格式化,代码检查的机制,这样的差异化会对团队代码规范(开发和检查)带来很多问题,所以需要统一。
-
prettier 主要是为了格式化代码,而在没有 prettier 之前,是用 eslint —fix和 编辑器自带代码格式来进行代码格式化的。
- 缺点:每种编辑器会有不一样的代码格式,而且配置会比较麻烦。
- prettier 已经逐渐成为业界主流的代码风格格式化工具。
- 减轻 eslint 等 工具 的校验规则,因为将代码样式校验交给了 prettier,所以可以将代码校验的规则更准确地应用到代码真正的规范上面。
-
eslint 是主要还是负责代码规则校验,prettier 只调整代码风格,代码样式,eslint 才是真正检查代码是否符合规范的工具。
两者分工不同,所以需要配合使用。
具体实现过程
- 统一团队使用的开发工具(webstorm,ide 编辑器)
- 安装 eslint 和 prettier (node 模块)
- 安装 eslint 和 prettier ( ide 编辑器的插件)
- 配置 eslint 和 prettier
- 配置 editorconfig (可选)
安装 eslint 和 prettier ( ide 编辑器的插件),主要就是利用 ide 编辑器做代码格式错误提醒和代码格式处理,这个操作也可以使用 webpack 打包的时候来做,也可以使用 npm 来做,但这里借助编辑器会更方便。
1. 统一团队使用的开发工具(webstorm,ide 编辑器)
开发工具可以做很多东西,是开发代码的利器,但是不同的开发工具会有不同的代码提示,代码格式化,代码检查的机制,这样的差异化会对团队代码规范(开发和检查)带来很多问题,所以需要统一。
前端开发工具推荐:WebStorm VSCode
2. 安装 eslint 和 prettier (node 模块)
这一步是最需要的,如果没有这两个模块,开发工具即使有插件也不能使用,必须安装好这两个模块才能使用。
// 这里需要全局安装最主要的两个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 的差异),可能有存在各种情况,所以最好还是安装上这个插件。
-
-
babel-eslint :
- 有些代码是没被 eslint 支持的(因为 babel 也是负责这种事情,转译不被支持的 js 语法),所以需要加上这个插件来保持兼容性。
-
eslint-plugin-html:
- 为了让eslint 可以检查.vue文件的代码。
3. 安装eslint 插件和 prettier 插件并启用插件
安装过程自行查看eslint 文档 和prettier 文档
4. 配置 eslint 插件和 prettier插件
-
eslint 的配置
参考配置 AlloyTeam ESLint 规则
.eslintrc 配置文件需要添加修改地方,主要是为了 prettier插件和eslint-config-prettier 插件 ~~和eslint-plugin-prettier插件~~ 使用的:
// 因为使用了 eslint 和 prettier,所以要加上他们 extends: [ 'eslint:recommended', 'plugin:prettier/recommended'], // required to lint *.vue files 使用 html参数 plugins: ['html', 'prettier'], // rules 规则就按照各家写法。 复制代码
-
prettier的配置
prettier 的检查规则是通过配置文件.prettierrc 实现的, 不过一般来说,只需要配置少部分规则即可:
{ "printWidth": 100, "singleQuote": true, "semi": false } 复制代码
有可能会出现的情况是,prettier 格式化后,全部加了分号,但是 eslint 又要去掉分号,那么就会重复了,这里可以简单地设置 prettier 的分号设置跟 eslint 保持一致,其他如此类推,但只适用在几个比较特别的地方,可以参考官方文档。
5. 配置 editorconfig
- EditorConfig可以帮助开发者在不同的编辑器和IDE之间定义和维护一致的代码风格。
- EditorConfig包含一个用于定义代码格式的文件和一批编辑器插件,这些插件可以让编辑器读取配置文件并依此格式化代码。
对此我个人的理解就是,editorconfig可以协助开发工具在自动格式化或者自动排版或者录入排版的时候进行代码格式化,但是只能支持比较简单的规则,不过也减轻了一部分代码格式化的压力和成本,所以有比没有好,而且最好要有。
// 放在项目根目录的.editorconfig文件 root = true [*] charset = utf-8 indent_style = space indent_size = 2 end_of_line = lf insert_final_newline = true trim_trailing_whitespace = true 复制代码
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 使用 MonoRepo 管理前端项目
- 使用 Mkdocs 制作项目文档
- 使用Taro开发项目总结
- 使用 Maven 构建 Java 项目
- 使用gradle构建java项目
- flask使用蓝图规划大型项目
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
计算机程序的构造和解释
Harold Abelson、Gerald Jay Sussman、Julie Sussman / 裘宗燕 / 机械工业出版社 / 2004-2 / 45.00元
《计算机程序的构造和解释(原书第2版)》1984年出版,成型于美国麻省理工学院(MIT)多年使用的一本教材,1996年修订为第2版。在过去的二十多年里,《计算机程序的构造和解释(原书第2版)》对于计算机科学的教育计划产生了深刻的影响。第2版中大部分重要程序设计系统都重新修改并做过测试,包括各种解释器和编译器。作者根据其后十余年的教学实践,还对其他许多细节做了相应的修改。 海报:一起来看看 《计算机程序的构造和解释》 这本书的介绍吧!
RGB转16进制工具
RGB HEX 互转工具
RGB CMYK 转换工具
RGB CMYK 互转工具