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 用户
配置文件
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.eslintrcpackage.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 数组中指定想使用的插件中的规则。任何插件中的规则必须带有插件名或其简写前缀。
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-prettier8.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 文件 。
项目运行后，若文件格式不符合规范，编辑器窗口有提示出现
光标移到问题行，会显示问题类型，可以点击快速修复选项来修复问题。
最新目录结构
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
原文地址：https://blog.51cto.com/u_13483473/2799139
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。