前语

年前为公司升级了新的monorepo项目架构，近来不必加班，在家得闲。便想再搭个monorepo项目，随意记载一下。
用到以下pnpm + vite3 + vue3 + ESLint + Stylelint + TypeScriptmonorepe实战记载，此篇为其间一个的简略介绍。

了解ESLint

ESLint是代码查看东西，用于查看代码是否契合标准，经过一些规矩来查看语法和束缚代码风格。
运用ESLint有诸多优点

一致语法，比方约定不能运用var。
一致代码风格，比方约定结束是否加分号，当团队多人协作时一致的编码风格至关重要。
防止一些初级过错，比方写错变量。
等等…

ESLint有两种东西

一种是代码修正(比方VS Code)的扩展东西，用于在编写代码时给予提示
一种是npm包，经过node履行包相关指令查看代码。

ESLint运用

这儿在一个vite + vue3的根底模板中参加eslint，其他项目的eslint装备都是类似的。

装置ESLint (npm包)

pnpm add eslint -D

装备ESLint

需求告知eslint需求用哪些规矩，就得增加个装备文件。能够直接在package.json中装备，也能够在项目根目录下创立.eslintrc.*文件。
支撑的格局按优先级次序如下

.eslintrc.js（优先引荐）
.eslintrc.yaml
.eslintrc.yml
.eslintrc.json
.eslintrc (官网提示弃用，但试了还能用。不过仍是尽量用其他格局吧)
package.json

还答应在文件下夹创立装备文件，比方在src下创立装备文件，此刻src文件夹下文件的装备选项为：从src文件夹往父目录查找装备文件（直到遇到有root：true选项的装备文件，或到根目录），装备选项便是这些装备的组合，并且内层的选项优先级高。

在项目根目录下创立.eslintrc.cjs。

// .eslintrc.mjs
export default {}

打算一步步增加装备来简略介绍eslint的运用，所以没有运用指令方便生成装备文件。
后边会介绍经过pnpx eslint --init来快速生成相应的装备文件。

常用指令

履行校验 [pnpx] eslint [文件|文件夹|.]

// 校验main.js文件
pnpx eslint main.js
// 校验src文件夹下所有js文件
pnpx eslint src

修正根底问题`–fix

// 增加--fix会主动修正一些不影响逻辑的根底问题
pnpx eslint src --fix

指定校验的文件类型 --ext

// eslint默许只校验.js文件，能够经过--ext指定更多类型文件，逗号隔开
pnpx eslint src --ext .js,.vue

一般都会将指令写入package.json中

// package.json
{
  // ...
  "scripts": {
     // ...
    "lint": "eslint src --fix --ext .ts,.tsx,.vue,.js,.jsx",
  }
}

一般常用的就这几个指令，了解更多指令请查看官网-指令行

装备选项介绍

前面只创立了个空的装备目标，还需求装备相应的选项，先了解它们。
项目当时只有一个js文件（src/main.js），先依据这个文件(作为开始事例代码)简略装备下选项以完成对它的校验。

parserOptions

指定想要支撑的 JavaScript 语言选项

module.exports = {
  parserOptions: {
    // 支撑的ECMAScript语法，默许ECMAScript 5。装备来支撑其他语法
    ecmaVersion: 12,
    // 代码模块，选项包含：script(默许)、module
    sourceType: 'module',
    // 额定的语言特性
    //ecmaFeatures: {
      // 是否 答应在大局效果域下运用`return`句子
      //globalReturn: false, 
      // 是否 启用大局严格模板[strict mode](如果`ecmaVersion`是 5 或更高)
      //impliedStrict: false,
      // 是否 支撑jsx
      //jsx: false, 
      // 是否 启用实验性的object rest/spread properties
      //experimentalObjectRestSpread: false,
    //}
  }
}

parser

装备eslint的解析器（解析代码并回来ast语法树），默许Espree，也可装备其他契合要求的解析器（比方esprima）

module.exports = {
  parser: 'esprima'
}

有些特殊文件还需求运用特征插件来解析，比方.vue文件需求运用vue-eslint-parser解析器进行解析，也能够在parser中装备

module.exports = {
  parser: 'vue-eslint-parser'
}

当还需求额定界说解析器时，能够在parserOptions.parser中装备。
比方已经装备了vuevue-eslint-parser解析器，还需求运用TypeScript@typescript-eslint/parser，就能够像下面这样装备。

module.exports = {
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser'
  }
}

解析器需求契合以下要求

它有必要是一个 Node 模块，能够从它出现的装备文件中加载。通常，这意味着应该运用 npm 独自装置解析器包。

它有必要契合parser interface。

rules

ESLint顺便很多的规矩，想要运用对应的规矩，就需求将将规矩ID装备以下值。

"off"或0– 关闭规矩
"warn"或1– 敞开规矩，运用正告等级的过错：warn(不会导致程序退出)
"error"或2– 敞开规矩，运用过错等级的过错：error(当被触发的时分，程序会退出)

有两种方式装备规矩。以装备规矩IDsemi(结束是否有分号)为例

在装备文件中装备
```
module.exports = {
  // ... 一些其他装备，没有装备其他rule
  rules: {
    semi: 2
  }
}
```
对事例代码

履行检测pnpx eslint src/main.js

如图：报了4个丢掉分号过错。
也在项目文件中以注释的方式【不引荐在代码里嵌入eslint规矩】

再履行检测pnpx eslint src/main.js

如图，没报eslint的semi过错了

extends

一个装备文件能够被根底装备中的已启用的规矩承继。
大白话eslint装备文件能够承继其他装备文件的装备选项。
当需求装备某些标准(比方内置标准、第三方标准…)，则需求在extends选项中装备。

例如，假定有某个第三方装备包eslint-config-aaa
a，咱们的装备文件.eslintrc.cjs内容如下

module.exports = {
  // ...
  rules: { 
    semi: 2 
  },
  extends: 'eslint-config-aaa'
}

b，第三方装备包eslint-config-aaa的规矩如下

module.exports = {
  rules: { 
    indent: [2, 2],
    semi: 0
  }
}

c，那么承继终究规矩如下

module.exports = {
  rules: {
    indent: [2, 2],
    semi: 2
  }
}

eslint-config-aaa包的rules的特点indent被承继，而semi被掩盖，可经过rules掩盖extends中承继的规矩。具体规矩如下

rules特点能够做下面的任何事情以扩展（或掩盖）规矩：

启用额定的规矩

改变承继的规矩等级而不改变它的选项：

根底装备："eqeqeq": ["error", "allow-null"]

派生的装备："eqeqeq": "warn"

最终生成的装备："eqeqeq": ["warn", "allow-null"]

掩盖根底装备中的规矩的选项

根底装备："quotes": ["error", "single", "avoid-escape"]

派生的装备："quotes": ["error", "single"]

最终生成的装备："quotes": ["error", "single"]

extends可装备指定装备的字符串(可用数组装备多个，比方extends: ['装备包1','装备包2'])，并且会递归读取extends装备中的装备。 extends值能够是以下这些

装备文件途径，例如

module.exports = {
  // ...
  extends: './eslint.js' // ./eslint.js 是本地的一个其他eslint装备文件的途径
}

可同享装备称号，可同享装备是个npm包，它输出一个装备目标。
这个可同享装备的npm包要求前缀: eslint-config-。如比较盛行的eslint-config-standard；还支撑npmscoped modules，比方@scope/eslint-config-myconfig
当装备时eslint-config-前缀能够省掉，比方
```
module.exports = {
  // ...
  // eslint-config-standard 的缩写
  extends: 'standard' 
}
```

插件(后边介绍)输出的规矩，装备时需求以plugin:最初，比方

module.exports = {
  // ...
  // eslint-plugin-vue 插件的缩写
  // plugin: ['vue'], 
  // 运用eslint-plugin-vue插件输入的vue3-recommended规矩
  extends: 'plugin:vue/vue3-recommended' //
}

eslint内置规矩包
- eslint:all 当时装置ESLint中 所有的规矩（不引荐运用）
- eslint:recommended 当时装置ESLint中 一些常用的规矩，在规矩页面中被标记为 √ 的规矩。
```
module.exports = {
  // ...
  // 运用eslint引荐规矩 eslint:recommended
  extends: 'eslint:recommended' 
}
```

plugins

当ESLint供给的规矩如果不能满足需求，就需求经过装备插件来为ESLint扩展规矩。
比方想对vue文件进行校验，就能够经过plugins选项装备（装备选项时eslint-plugin-前缀可省掉）。

下面以让eslint支撑vue项目校验为例，演示怎么运用插件和装备插件以及规矩。

先装置以下依靠包:
- vue-eslint-parser 解析vue文件的解析器
- eslint-plugin-vue 为vue文件增加新规矩的插件
```
pnpm add vue-eslint-parser eslint-plugin-vue -D
```

修正eslint装备文件

module.exports = {
  // ...
  parser: 'vue-eslint-parser',
  plugins: [
    // eslint-plugin-vue的缩写，eslint-plugin-可省掉
    'vue'
  ],
  extends: [
     // 运用eslint-plugin-vue插件供给的vue3-recommended规矩
    'plugin:vue/vue3-recommended'
  ]
}

履行校验指令npx eslint src --ext .js,.vue
能够看到已支撑对vue文件校验了。

env

若想运用环境变量，比方浏览器下的window变量，需求敞开对应的环境选项env。比方

module.exports = {
  env: {
    browser: true
  }
}

比较常用到的环境包含：

browser– 浏览器环境中的大局变量。
node– Node.js 大局变量和 Node.js 效果域。
commonjs– CommonJS 大局变量和 CommonJS 效果域 (用于 Browserify/WebPack 打包的只在浏览器中运转的代码)。
shared-node-browser– Node.js 和 Browser 通用大局变量。
es6– 启用除了 modules 以外的所有 ECMAScript 6 特性（该选项会主动设置ecmaVersion解析器选项为 6）。
worker– Web Workers 大局变量。
amd– 将require()和define()界说为像amd一样的大局变量。
更多可用环境

globals

当运用当时文件源文件未界说的变量时，no-undef规矩将发出正告。此刻就能够经过globals选项来界说大局变量以躲避no-undef正告。

module.exports = {
  globals: { 
    var1: 'writable', // writable 可写
    var2: 'readonly', // readonly 仅读
    var3: 'off' // off 禁用该大局变量
  }
}

注意： 要启用no-global-assign规矩来禁止对只读的大局变量进行修正。

overrides

当需求对某些文件规矩重写时，能够运用overrides选项。
例如 bin和lib下的js文件的规矩重写。

module.exports = {
  overrides: [{
    files: ['bin/*.js', 'lib/*.js'],
    excludedFiles: '*.test.js',
    rules: {
        quotes: ['error','single']
    }
  }]
}

.eslintignore

当需求告知ESLint疏忽某些文件时，能够在项目根目录创立.eslintignore文件

# 这行是注释
node_modules
dist

也能够直接在package.json中装备

{
  "eslintIgnore": ["node_modules","dist"]
}

指令方式创立装备文件。

便是直接履行npx eslint –init指令，然后依据项目状况挑选就行，引荐直接跳到下一节点。下面记载的有点不太必要，但当时记都记载了就没删掉-

D:\data\st\vue\vite-vue3>npx eslint --init
You can also run this command directly using 'npm init @eslint/config'.        
Need to install the following packages:
  @eslint/create-config@0.4.2
Ok to proceed? (y)

提示需求装置对应的包@eslint/create-config，直接按回车

? How would you like to use ESLint? ...
  To check syntax only 
  To check syntax and find problems
> To check syntax, find problems, and enforce code style

问询怎么运用ESLint？依据实际需求自行挑选，
这儿挑选第三种 查看语法、发现问题并强制履行代码样式

? What type of modules does your project use? ...
> JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

项目用哪种模块？项目用的ESM，所以也选这个

? Which framework does your project use? ...
  React
> Vue.js
  None of these

用的哪种结构？项目用的Vue

? Does your project use TypeScript?  No / Yes

是否运用TypeScript？因当时用vite建demo没选ts模板，所以这儿也选No

? Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)
√ Browser
√ Node

代码在哪运转，会对应敞开装备env选项的环境变量。都勾选

? How would you like to define a style for your project? ...
> Use a popular style guide
  Answer questions about your style

界说哪种风格装备，这儿选第一种用盛行的风格装备规矩

? Which style guide do you want to follow? ...
  Airbnb: https://github.com/airbnb/javascript
> Standard: https://github.com/standard/standard        
  Google: https://github.com/google/eslint-config-google
  XO: https://github.com/xojs/eslint-config-xo

遵从哪种风格？前两种用的多点，有些规矩不太同，Airbnb要求有必要加行尾分号、函数名后边有必要加空格，Standard则反之。这儿对比我更喜爱第二种 Standard，不过团队开发规矩都是用定制的多，比方咱们开发便是用的公司团队定制的规矩。

? What format do you want your config file to be in? ...
> JavaScript
  YAML
  JSON

装备文件运用哪种风格，都可，这儿引荐运用JavaScript。

Checking peerDependencies of eslint-config-standard-with-typescript@latest
The config that you've selected requires the following dependencies:
eslint-plugin-vue@latest eslint-config-standard-with-typescript@latest @typescript-eslint/eslint-plugin@^5.43.0 eslint@^8.0.1 eslint-plugin-import@^2.25.2 eslint-plugin-n@^15.0.0 eslint-plugin-promise@^6.0.0 typescript@*
? Would you like to install them now?  No / Yes

提示需求装置这种依靠，是否现在装置，Yes、

? Which package manager do you want to use? ...
  npm
  yarn
> pnpm

用哪种包管理东西，看各自状况，我选用pnpm

最终这儿依据挑选主动生成.eslintrc.mjs文件，默许内容如下（默许内容一般还需求修正装备以适应团队标准）。

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    'standard'
  ],
  overrides: [
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  plugins: [
    'vue'
  ],
  rules: {
  }
}

VS Code装置eslint插件

经过eslint npm包能够经过指令行来查看代码，还能够经过VS Code的eslint插件使咱们在写代码的时分就能给出提示。
在商店装置ESLint插件

不需求额定装备，eslint插件会依据前面装备的eslint装备文件对代码进行提示。

结合prettier

eslint专心于查看代码标准，也能够格局化代码，主要确保代码质量。
prettier专心于格局化代码，不会修正代码内容，确保代码漂亮，并且prettier还支撑格局化其它语言的代码。
eslint尽管也能格局化代码，但有一些格局问题仍是需求经过prettier。
ESLint与Prettier容易有一些规矩抵触，可经过eslint-config-prettier和eslint-plugin-prettier，使装备以prettier为重。如下过程装备，

1，运用前需先装置依靠

pnpm add eslint-config-prettier eslint-plugin-prettier prettier -D

2，修正.eslintrc.cjs

module.exports = {
  extends: [
    // ...
    // eslint-plugin-prettier插件输入的内置规矩，装备在最终
    'plugin:prettier/recommended'
  ]
}

3，新增.prettierrc.cjs能够新增规矩，新增.prettierignore装备疏忽文件（和.eslintignore装备类似）。

// .prettierrc.cjs 常规装备
module.exports = {
    // 一行最多 100 字符
    printWidth: 100,
    // 运用缩进符，false表明运用空格缩进
    useTabs: true,
    // 运用多少个空格缩进，个人习惯2个，也很多人喜爱是用4个缩进
    tabWidth: 2,
    tabSize: 2,
    // 行尾需求有分号
    semi: false,
    // 运用单引号
    singleQuote: true,
    // 目标的 key 仅在必要时用引号
    quoteProps: 'as-needed',
    // jsx 不运用单引号，而运用双引号
    jsxSingleQuote: false,
    // 末尾不需求逗号 'es5'  none
    trailingComma: 'es5',
    // 大括号内的首尾需求空格
    bracketSpacing: true,
    // jsx 标签的反尖括号需求换行
    jsxBracketSameLine: false,
    // 箭头函数，只有一个参数的时分，也需求括号
    arrowParens: 'always',
    // 每个文件格局化的范围是文件的全部内容
    rangeStart: 0,
    rangeEnd: Infinity,
    // 不需求写文件最初的 @prettier
    requirePragma: false,
    // 不需求主动在文件最初插入 @prettier
    insertPragma: false,
    // 运用默许的折行标准
    proseWrap: 'preserve',
    // 依据显示样式决议 html 要不要折行
    htmlWhitespaceSensitivity: 'css',
    // 换行符运用 lf 结束是 \n \r \n\r auto
    endOfLine: 'lf',
};

eslint-plugin-prettier: prettier插件，将prettier规矩作为eslint规矩运转。该插件还内置了一个规矩装备recommended
eslint-config-prettier: prettier装备，该装备关闭了一些与prettier抵触的eslint规矩。
上面第2步装备了eslint-plugin-prettier插件的内置引荐装备recommended，该装备内容如下。

{
   // 敞开了 eslint-config-prettier 装备
   // 它关闭了一些与Prettier抵触的ESLint规矩。
  "extends": ["prettier"],
  // 注册了该插件
  "plugins": ["prettier"],
  "rules": {
     // 启动该插件供给的规矩，以ESLint运转该规矩
    "prettier/prettier": "error",
    "arrow-body-style": "off",
    "prefer-arrow-callback": "off"
  }
}

经过以上装备可解决一些抵触，但仍是有或许出现抵触。比方.eslintrc.* rules中和.prettierrc.* 中有装备相反的规矩就会有抵触。
假定perttier装备结束需求分号，eslint装备结束不能有分号。

经过eslint-config-prettier和eslint-plugin-prettier可解决prettier和eslint抵触问题，若还有抵触查看pretter(.prettierrc.* )和eslint(.eslintrc.* )的装备是否一致。

结束

eslint根本运用到这就结束了，信任对eslint有必定的了解，甚至自己还能拟定规矩了吧。如感觉文章有点烦琐，或介绍的不得要领的话，还请见谅。如有不对当地欢迎指出~

ESLint介绍

前语

了解ESLint

ESLint运用

装置ESLint (npm包)

装备ESLint

常用指令

装备选项介绍

parserOptions

parser

rules

extends

plugins

env

globals

overrides

.eslintignore

指令方式创立装备文件。

VS Code装置eslint插件

结合prettier

结束

作者信息

推广

ESLint介绍

前语

了解ESLint

ESLint运用

装置ESLint (npm包)

装备ESLint

常用指令

装备选项介绍

parserOptions

parser

rules

extends

plugins

env

globals

overrides

.eslintignore

指令方式创立装备文件。

VS Code装置eslint插件

结合prettier

结束

相关文章

10、Jetpack Compose 入门 — 动画（一）

【Docker】高可用前后端分离项目集群部署

三十岁前端的破冰尝试

埋头前进，来自22届毕业生的2022年年度总结

作者信息

推广