03.ElementUI 2.X 源码学习:代码风格检查和格式化配置（ESlint ＆ Prettier）

Andurils
1,266 阅读8分钟

书接上文。在团队协作中，为避免低级Bug、以及团队协作时不同代码风格对彼此造成的困扰与影响，会预先制定编码规范。使用 Lint工具和代码风格检测工具，则可以辅助编码规范执行，格式化代码，使样式与规则保持一致，有效控制代码质量，实现项目代码风格统一。

在代码格式化方面， Prettier 和 ESLint 有重叠，但两者侧重点不同：ESLint 所能提供的格式化功能很有限；而 Prettier 在格式化代码方面具有更大优势。而 Prettier 被设计为易于与 ESLint 集成，所以在项目中使用两者，无需担心冲突。。

0x00.Prettier 概览

配置文件

Prettier 支持几种格式的配置文件,优先级顺序如下：

  1. 在 package.json 里创建一个 prettier 属性，在那里定义你的配置.
  2. 使用 .prettierrc，可以使 JSON 也可以是 YAML。
  3. 使用 .prettierrc.json, .prettierrc.yml, .prettierrc.yaml,.prettierrc.json5 去定义配置的结构.
  4. 使用 .prettierrc.js, .prettierrc.cjs, prettier.config.js, prettier.config.cjs 去定义配置的结构--必须使用 module.exports 暴露对象.
  5. 使用 .prettierrc.toml 去定义配置的结构.

.prettierignore

在根目录下加一个.prettierignore文件实现文件级别的忽略(语法同.gitignore)。

⭐ autocrlf解决跨系统diff问题

Windows 使用回车（CR）和换行（LF）两个字符来结束一行，而 macOS 和 Linux 只使用换行（LF）一个字符,会极大地扰乱跨平台协作。

Unix/Mac用户

// 提交时转换为LF，检出时不转换  
git config --global core.autocrlf input
// 提交包含混合换行符的文件时给出警告 
git config --global core.safecrlf warn

Windows 用户

// 提交时转换为LF，检出时转换CRLF
git config --global core.autocrlf true
// 提交包含混合换行符的文件时给出警告
git config --global core.safecrlf warn

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 只会使用一个。优先级顺序如下：

  1. .eslintrc.js
  2. .eslintrc.yaml
  3. .eslintrc.yml
  4. .eslintrc.json
  5. .eslintrc
  6. 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- 。

{ 
    "extends": [ 
        "standard", 
        "eslint-config-standard"  // 两个是等同的
    ], 
}

值为 "eslint:recommended" 的 extends 属性启用一系列核心规则，在 规则页面中被标记为✔️。
值为 "eslint:all" 的 extends 属性启用当前安装的 ESLint 中所有的核心规则，不推荐在产品中使用。

plugins 属性

插件是一个 npm 包，通常输出规则。一些插件也可以输出一个或多个命名的 配置(Configs) 。
plugins 属性值可以使用短名称，省略包名的前缀 eslint-plugin- 。

{
    "plugins": [
        "plugin",
        "eslint-plugin-plugin"//两个是等同的
    ]
}

插件打包配置

插件在 configs 键下指定打包的配置，且支持多配置。

// eslint-plugin-myPlugin
module.exports = {
    configs: {
        myConfig: {
            plugins: [ "myPlugin"],
            env: [ "browser"],
            rules: {
                semi: "error",
                "myPlugin/my-rule" : "error",
                "eslint-plugin-myPlugin/another-rule" : "error"
            }
        }，
        myotherconfig: {
            plugins:[ "myPlugin" ],
            env: [ "node"],
            rules: i
                "myPlugin/my-rule" : "off",
                "eslint-plugin-myPlugin/ another-rule" : "off",
                "eslint-plugin-myPlugin/yet-another-rule" : "error
            }
        }
    }
};

示例插件名为 eslint-plugin-myPlugin，那么 myConfig 和 myOtherConfig 配置可以分别从 "plugin:myPlugin/myConfig" 和 "plugin:myPlugin/myOtherConfig" 扩展出来。

此时 extends 属性值由以下组成：

plugin: + 包名 (省略了前缀 myPlugin ) + / + 配置名称 (myConfig)

{
    "plugins" : ["myPlugin"],
    "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 模式表明哪些路径应该忽略检测。

0x02.项目配置

prettier 配置

在项目中安装 prettier 。

npm install --save-dev --save-exact prettier

在根目录下创建 .prettierrc.js 配置文件 。

module.exports = {
  semi: false, // 是否在语句末尾打印分号
  singleQuote: true, // 使用单引号
  trailingComma: 'all', // 尽可能使用尾随逗号（包括函数参数）
  bracketSpacing: true, // 是否在对象属性添加空格，这里选择是 { foo: bar }
  printWidth: 160, // 指定代码换行的行长度。单行代码宽度超过指定的最大宽度，将会换行
  proseWrap: 'never', //不要换行
  endOfLine: 'auto',
}

在根目录下创建 .prettierignore 文件 。

# Ignore artifacts:
build
coverage

# Ignore all files:
# *.html

执行指令，格式化整个项目。

./ node_modules/.bin/prettier --write .

成功执行后，输出文件列表，被格式化的文件名称 白色高亮 。 微信截图_20210416214937.png

eslint 配置

安装 eslint和相关插件 eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue，让Prettier 和 ESLint更好的一起工作。

npm install --save-dev eslint 
npm install --save-dev eslint-plugin-prettier eslint-config-prettier 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 更新日志

github.com/prettier/es…
github.com/prettier/es…

在根目录下创建 .eslintignore 文件 。

*.sh
*.md
*.scss
*.woff
*.ttf

node_modules
coverage
lib

项目运行后，若文件格式不符合规范，编辑器窗口有提示出现

微信截图_20210417013312.png

光标移到问题行，会显示问题类型，可以点击快速修复选项来修复问题。

微信截图_20210417013429.png

webpack loader

IDE插件会直接显示文件格式问题，为了能在编译窗口中直接显示问题，安装 eslint-webpack-plugin (eslint-loader 已废弃)插件。

npm install eslint-webpack-plugin --save-dev

更新 build\webpack.config.js 内容。

const ESLintPlugin = require('eslint-webpack-plugin')

module.exports = { 
  plugins: [ 
    new ESLintPlugin({
      fix: true, // 自动修复
      extensions: ['js', 'vue'],
    }), 
  ],
}

项目编译失败，输入问题列表，点击可以快速定位。(若编译时自动修复问题，在插件中设置fix: true即可)

微信截图_20210419164847.png

最新目录结构

carbon (18).png

0x03.示例代码

Github Repo

0x04.链接汇总

点击以下链接，可以快速查看本系列其他文章：

ElementUI 2.X 源码学习:从零开始搭建Vue组件库汇总

专栏/ElementUI 2.X 源码学习

0x05.参考

ESLint配置：cn.eslint.org/docs/user-g…
Prettier配置：prettier.io/docs/en/con…
Git自定义配置：git-scm.com/book/zh/v2/…
Glob模式简介: www.cnblogs.com/savorboard/…

avatar
文章
阅读
粉丝
相关推荐
【vue3-element-admin】ESLint+Prettier+Stylelint+EditorConfig 约束和统一前端代码规范
2.4k阅读
 · 
24点赞