03.ElementUI源码学习:代码风格检查和格式化配置(ESlint & Prettier)
2021/5/21 1:24:50
本文主要是介绍03.ElementUI源码学习:代码风格检查和格式化配置(ESlint & Prettier),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
03.ElementUI源码学习:代码风格检查和格式化配置(ESlint & Prettier)
2021-04-17 01:51 Anduril 阅读(329) 评论(0) 编辑 收藏 在团队协作中,为避免低级Bug、以及团队协作时不同代码风格对彼此造成的困扰与影响,会预先制定编码规范。使用 Lint工具和代码风格检测工具,则可以辅助编码规范执行,格式化代码,使样式与规则保持一致,有效控制代码质量,实现项目代码风格统一。书接上文。在团队协作中,为避免低级Bug、以及团队协作时不同代码风格对彼此造成的困扰与影响,会预先制定编码规范。使用 Lint工具和代码风格检测工具,则可以辅助编码规范执行,格式化代码,使样式与规则保持一致,有效控制代码质量,实现项目代码风格统一。
在代码格式化方面, Prettier 和 ESLint 有重叠,但两者侧重点不同:ESLint 所能提供的格式化功能很有限;而 Prettier 在格式化代码方面具有更大优势。而 Prettier 被设计为易于与 ESLint 集成,所以在项目中使用两者,无需担心冲突。。
0x00.Prettier 概览配置文件
Prettier 支持几种格式的配置文件,优先级顺序如下:
- 在
package.json
里创建一个prettier
属性,在那里定义你的配置. - 使用
.prettierrc
,可以使 JSON 也可以是 YAML。 - 使用
.prettierrc.json
,.prettierrc.yml
,.prettierrc.yaml
,.prettierrc.json5
去定义配置的结构. - 使用
.prettierrc.js
,.prettierrc.cjs
,prettier.config.js
,prettier.config.cjs
去定义配置的结构--必须使用module.exports
暴露对象. - 使用
.prettierrc.toml
去定义配置的结构.
.prettierignore
在根目录下加一个.prettierignore
文件实现文件级别的忽略(语法同.gitignore
)。
⭐ autocrlf解决跨系统diff问题
Windows 使用回车(CR)和换行(LF)两个字符来结束一行,而 macOS 和 Linux 只使用换行(LF)一个字符,会极大地扰乱跨平台协作。
Unix/Mac用户
Windows 用户
0x01.ESlint 概览配置文件
ESLint 支持几种格式的配置文件:
- JavaScript - 使用
.eslintrc.js
然后输出一个配置对象。 - YAML - 使用
.eslintrc.yaml
或.eslintrc.yml
去定义配置的结构。 - JSON - 使用
.eslintrc.json
去定义配置的结构,ESLint 的 JSON 文件允许 JavaScript 风格的注释。 -
(弃用) - 使用。.eslintrc
,可以使 JSON 也可以是 YAML - package.json - 在
package.json
里创建一个eslintConfig
属性,在那里定义你的配置。
如果同一个目录下有多个配置文件,ESLint 只会使用一个。优先级顺序如下:
.eslintrc.js
.eslintrc.yaml
.eslintrc.yml
.eslintrc.json
.eslintrc
package.json
配置文件常用属性 root
env
parserOptions
parser
extends
plugins
rules
等功能配置如下:
root 属性
ESLint 会在所有父级目录里寻找配置文件,一直到根目录。一旦发现配置文件中有 "root": true
,它就会停止在父级目录中寻找。
env 属性
使用 env
关键字指定想启用的环境,并设置它们为 true。环境并不是互斥的,所以可以同时定义多个。
更多可用的环境列表
parserOptions 属性
解析器选项使用 parserOptions
属性设置。可用的选项有:
-
ecmaVersion
- 默认设置为 3,5(默认), 你可以使用 6、7、8、9 或 10 来指定你想要使用的 ECMAScript 版本。你也可以用使用年份命名的版本号指定为 2015(同 6),2016(同 7),或 2017(同 8)或 2018(同 9)或 2019 (same as 10) -
sourceType
- 设置为 "script" (默认) 或 "module"(如果你的代码是 ECMAScript 模块)。 -
ecmaFeatures
- 这是个对象,表示你想使用的额外的语言特性:-
globalReturn
- 允许在全局作用域下使用 return 语句 -
impliedStrict
- 启用全局 strict mode (如果 ecmaVersion 是 5 或更高) -
jsx
- 启用 JSX -
experimentalObjectRestSpread
- 启用实验性的 object rest/spread properties 支持。(重要:这是一个实验性的功能,在未来可能会有明显改变。 建议你写的规则 不要 依赖该功能,除非当它发生改变时你愿意承担维护成本。)
-
parser 属性
在配置文件中指定一个不同的解析器。在使用自定义解析器时,为了让 ESLint 在处理非 ECMAScript 5 特性时正常工作,配置属性 parserOptions
仍然是必须的。解析器会被传入 parserOptions
,但是不一定会使用它们来决定功能特性的开关。
extends 属性
通过声明扩展配置、启用规则。
extends
的属性值可以是:
- 指定配置的字符串(配置文件的路径、可共享配置的名称、
eslint:recommended
或eslint:all
) - 字符串数组:每个配置继承它前面的配置
extends
属性值可以使用短名称,省略包名的前缀 eslint-config-
。
值为 "eslint:recommended"
的 extends
属性启用一系列核心规则,在 规则页面中被标记为✔️。
值为 "eslint:all"
的 extends
属性启用当前安装的 ESLint 中所有的核心规则,不推荐在产品中使用。
plugins 属性
插件是一个 npm 包,通常输出规则。一些插件也可以输出一个或多个命名的 配置(Configs)
。plugins
属性值可以使用短名称,省略包名的前缀 eslint-plugin-
。
插件打包配置
插件在 configs
键下指定打包的配置,且支持多配置。
示例插件名为 eslint-plugin-myPlugin
,那么 myConfig
和 myOtherConfig
配置可以分别从 "plugin:myPlugin/myConfig"
和 "plugin:myPlugin/myOtherConfig"
扩展出来。
此时 extends
属性值由以下组成:
plugin:
+ 包名 (省略了前缀 myPlugin )
+ /
+ 配置名称 (myConfig)
⭐ 在默认情况下,配置不会启用插件中的任何规则。必须在 plugins
数组中指定插件名,extends
数组中指定想使用的插件中的规则。任何插件中的规则必须带有插件名或其简写前缀。
官方文档 Configs in Plugins
rules 属性
rules
属性启用额外的规则、改变规则的级别和选项。
要改变一个规则设置,必须将规则 ID 设置为下列值之一:
- "off" 或 0 - 关闭规则
- "warn" 或 1 - 开启规则,使用警告级别的错误:warn (不会导致程序退出)
- "error" 或 2 - 开启规则,使用错误级别的错误:error (当被触发的时候,程序会退出)
.eslintignore
过在项目根目录创建一个 .eslintignore
文件告诉 ESLint 去忽略特定的文件和目录。.eslintignore 文件是一个纯文本文件,其中的每一行都是一个 glob 模式表明哪些路径应该忽略检测。
prettier 配置
在项目中安装 prettier
。
在根目录下创建 .prettierrc.js
配置文件 。
在根目录下创建 .prettierignore
文件 。
执行指令,格式化整个项目。
成功执行后,输出文件列表,被格式化的文件名称 白色高亮 。
eslint 配置
安装 eslint
和相关插件 eslint-config-prettier
eslint-plugin-prettier
eslint-plugin-vue
,让Prettier 和 ESLint更好的一起工作。
npm install --save-dev eslint npm install --save-dev eslint-config-prettier eslint-plugin-prettier npm install --save-dev eslint-plugin-vue
在根目录下创建 .eslintrc.js
配置文件 。
module.exports = { root: true, env: { node: true, browser: true, }, parserOptions: { ecmaVersion: 6, sourceType: 'module', ecmaFeatures: { jsx: true, }, }, extends: ['plugin:vue/essential', 'eslint:recommended', 'prettier'], plugins: ['vue', 'prettier'], rules: { 'prettier/prettier': 'error', 'arrow-body-style': 'off', 'prefer-arrow-callback': 'off', }, }
ℹ️
eslint-config-prettier
8.0.0 版本之后, 直接声明"prettier"
就可以使用所有的插件。
8.0.0 更新日志https://github.com/prettier/eslint-config-prettier#special-rules
https://github.com/prettier/eslint-plugin-prettier#recommended-configuration
在根目录下创建 .eslintignore
文件 。
项目运行后,若文件格式不符合规范,编辑器窗口有提示出现
光标移到问题行,会显示问题类型,可以点击快速修复
选项来修复问题。
最新目录结构
0x03.示例代码Github Repo
参考ESLint配置:https://cn.eslint.org/docs/user-guide/configuring
Prettier配置:https://prettier.io/docs/en/configuration.html
Git自定义配置:https://git-scm.com/book/zh/v2/自定义-Git-配置-Git
Glob模式简介: https://www.cnblogs.com/savorboard/p/glob.html
这篇关于03.ElementUI源码学习:代码风格检查和格式化配置(ESlint & Prettier)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-01后台管理开发学习:新手入门指南
- 2024-11-01后台管理系统开发学习:新手入门教程
- 2024-11-01后台开发学习:从入门到实践的简单教程
- 2024-11-01后台综合解决方案学习:从入门到初级实战教程
- 2024-11-01接口模块封装学习入门教程
- 2024-11-01请求动作封装学习:新手入门教程
- 2024-11-01登录鉴权入门:新手必读指南
- 2024-11-01动态面包屑入门:轻松掌握导航设计技巧
- 2024-11-01动态权限入门:新手必读指南
- 2024-11-01动态主题处理入门:新手必读指南