# 项目构建

🐴

# 使用ESLint（7.32.0）

ESLint 中文网 (opens new window)

# 安装ESLint

npm i eslint -g

//or

yarn add eslint

# 配置ESLint

配置eslint我们可以在根目录创建.eslintrc.js配置文件, 关于eslint的配置可以查看这里 (opens new window)

// .eslintrc.js 配置文件

module.exports = { 
  extends: ['eslint:recommended'], // 默认规则
  parser: '@babel/eslint-parser', // 解析器
  parserOptions:{
    sourceType: 'module', // 启用module
    babelOptions: {
      presets: ['@babel/preset-env']
    }
  },
  env: {
    browser: true,
    node: true,
    es6: true, 
    mocha: true
  },
  globals: {
    history: true,
    location: true,
    sessionStorage: true,
    localStorage: true
  },
  rules: {
     //... 一些规则
  }
}

1. 关于extends

extends主要作用是继承第三方的eslint规则，常见的第三方规则如下：

eslint:recommended (opens new window)官方推荐的
eslint-config-prettier (opens new window) prettier规则主要目的是覆盖其它规则
eslint-plugin-react (opens new window) react的eslint规则
@typescript-eslint/eslint-plugin (opens new window) TS的eslint规则

2. 关于parser解析器

ESLint默认使用Espree作为其解析器,除此之外可以使用下面解析器：

@babel/eslint-parser (opens new window) babel解析器
@typescript-eslint/parser (opens new window) TS解析器

3. 关于parserOptionss解析器配置（选项）

parserOptionss (opens new window)可以设置解析器的选项，常见的选项如下：

parserOptionss = {
  sourceType: 'module', //设置ECMAScript 模块 
  ecmaFeatures: {}, // 设置额外的语言特性
  babelOptions: { // babel的一些配置
    presets: [], //babel的一些预设 https://www.babeljs.cn/docs/babel-preset-env
    plugins: [] // babel的一些插件
  }
}

4. 关于plugins插件

plugins主要是扩展eslint的规则，常见的插件如：

eslint-plugin-react (opens new window) 扩展了一些关于react语法规则
eslint-plugin-react-hooks
eslint-plugin-import (opens new window) 检测文件路径和导入名称拼写错误的问题。
eslint-config-prettier (opens new window) 该插件主要是关闭了一些与可能与Prettier冲突的规则

5. 关于env

定义项目环境, 可用的环境可以访问这里 (opens new window)

6. 关于globals

定义全局变量，防止使用未定义的变量时报错。

7. 关于rules

设定eslint检测规则

off 或 0 - 关闭规则
warn 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
error 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

8. 关于settings

settings (opens new window)该配置主要向被执行的规则中注入settings中的变量。当然并不是每个规则插件都使用了它，看具体规则的编写了。eslint-plugin-import (opens new window)插件就使用了settings配置，如

// .eslintrc.js 配置文件
module.exports ={
  settings:{
    'import/resolver': {
      node: {
          extensions: ['.js', '.jsx'],
      },
      alias: {
        '@': resolve('src')
      }
    },
  }
}

# ESLint检测React

在React中使用ESLint我们需要安装一些插件

eslint-plugin-react
eslint-plugin-react-hooks

然后做一下配置

// .eslintrc.js 配置文件
module.exports = { 
  extends: ['eslint:recommended','plugin:react/recommended'], // 添加react规则
  parser: '@babel/eslint-parser', // 解析器
  parserOptions:{
    sourceType: 'module', 
    babelOptions: {
      presets: ['@babel/preset-env']
    }
  },
  plugins: ['react','react-hooks'], // 增加react
  rules: {
     //... 一些规则
  }
}

# ESLint检测Vue

在Vue中使用ESLint我们需要安装一些插件和解析器

eslint-plugin-vue 插件 (opens new window)
vue-eslint-parser 解析器 (opens new window)

然后做一下配置

// .eslintrc.js 配置文件
module.exports = { 
  extends: ['eslint:recommended','plugin:vue/recommended'], // 添加vue规则
  parser: '@babel/eslint-parser', // 使用vue解析器
  parserOptions:{
    sourceType: 'module', // 启用module
    babelOptions: {
      presets: ['@babel/preset-env','@babel/preset-react']
    }
  },
  plugins: ['react','react-hooks'],
  rules: {
     //... 一些规则
  }
}

# ESLint检测TypeScript

在React中使用TypeScript我们需要安装一些插件和解析器

@typescript-eslint/parser 解析器
@typescript-eslint/eslint-plugin 插件

然后做一下配置

// 下面是在react中引入ts
// .eslintrc.js 配置文件
module.exports = { 
  extends: ['eslint:recommended','plugin:@typescript-eslint/recommended'], // 添加typescript规则
  parser: '@typescript-eslint/parser', // 使用typescript解析器
  parserOptions:{
    sourceType: 'module', // 启用module
    babelOptions: {
      presets: ['@babel/preset-env','@babel/preset-react', '@babel/preset-typescript'],
      plugins: [
        ['@babel/plugin-proposal-decorators', { legacy: true }],
        ['@babel/plugin-proposal-class-properties', { loose: true }],
      ],
    }
  },
  plugins: ['react','react-hooks'],
  settings: {
      //支持从TypeScript文件导入JavaScript文件中的模块
      'import/resolver': {
          node: {
              extensions: isTsProject ? ['.js', '.jsx', '.ts', '.tsx', '.d.ts'] : ['.js', '.jsx'],
          },
      },
      // ts 解析的文件
      'import/parsers': {
          '@typescript-eslint/parser': ['.ts', '.tsx', '.d.ts'],
      },
  },
  rules: {
     //... 一些规则
  }
}

# 忽略ESLint

在目录添加 .eslintignore文件来时eslint忽略某些文件的检测如：

node_modules

通过注释，如下：

/* eslint-disable */

// 在文件顶端添加 /* eslint-disable */ 将忽略整个文件

/* eslint-disable */
var a = 1;
/* eslint-enable */

// 将忽略 var a = 1;

# 格式化代码

prettier格式化代码 (opens new window)
VScode格式化代码

# prettier格式化

# 基本使用

首先安装prettier

npm install --save-dev --save-exact prettier
//or
yarn add prettier --dev --exact

然后我们可以在根目录创建.prettierrc.js配置文件。如：

module.exports = {
  printWidth: 100,// 一行最多 100 字符
  useTabs: false, // 不使用缩进符，而使用空格
  tabWidth: 2, // 使用 2 个空格缩进
  tabSize: 2,
  semi: true,// 行尾需要有分号
  singleQuote: true, // 使用单引号
  quoteProps: 'as-needed',// 对象的 key 仅在必要时用引号
  jsxSingleQuote: false,// jsx 不使用单引号，而使用双引号
  trailingComma: 'es5',// 末尾不需要逗号 'es5'  none
  bracketSpacing: true,// 大括号内的首尾需要空格
  jsxBracketSameLine: false,// jsx 标签的反尖括号需要换行
  arrowParens: 'always', // 箭头函数，只有一个参数的时候，也需要括号
  rangeStart: 0,// 每个文件格式化的范围是文件的全部内容
  rangeEnd: Infinity,
  requirePragma: false,// 不需要写文件开头的 @prettier
  insertPragma: false, // 不需要自动在文件开头插入 @prettier
  proseWrap: 'preserve',// 使用默认的折行标准
  htmlWhitespaceSensitivity: 'css',// 根据显示样式决定 html 要不要折行
  endOfLine: 'lf',// 换行符使用 lf 结尾是 \n \r \n\r auto
  overrides: [ // 设置解析器配置项
      {
         // 以json解析器格式 .prettierrc 文件
          files: '.prettierrc', 
          options: {
              parser: 'json', 
          },
      },
      {
          files: 'document.ejs',
          options: {
              parser: 'html',
          },
      },
  ],
}

然后我们可以使用命令执行格式化

// package.json文件
{
  "scripts":{
    "prettier": "prettier -c --write \"src/**/*\"",
  }
}

然后执行 npm run prettier

# 和ESLint一起使用

ESLint和prettier关系可以查看这里 (opens new window)

和ESLint使用需要安装prettier的eslint插件

eslint-config-prettier
eslint-plugin-prettier

eslint-config-prettier的作用是可以关掉所有和 Prettier 冲突的 ESLint 的配置 eslint-plugin-prettier的作用就是把Prettier推荐的格式问题的配置以ESLint rules的方式写入，使其报错的来源依旧是ESLint

yarn add --dev eslint-config-prettier eslint-plugin-prettier

然后再.eslintrc.js中引入

module.exports = {
  extends: ['prettier'],
  plugins: ["prettier"],      
  rules: {        
      "prettier/prettier": "error"      
  }    
}

// 上面的配置可以合并成一个

module.exports = {
  "extends": ["plugin:prettier/recommended"]
}

# VScode根据eslint格式化

使用VScode保存时格式化代码，我们需要安装一些插件

eslint

然后我们可以再VScode配置文件settings.json进行配置。

如下：

{
  "editor.codeActionsOnSave": { // 编辑器自动保存
    "source.fixAll.eslint": true
  },
  "eslint.autoFixOnSave": true, // 以eslint规则进行格式化
  "eslint.packageManager": "yarn",
  "eslint.validate": [ // 格式的文件
    {
      "language": "vue",   // 检测vue文件
      "autoFix": true   //  为vue文件开启保存自动修复的功能
    },
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "jsx",
      "autoFix": true
    },
    {
      "language": "javascript", //  用eslint的规则检测js文件
      "autoFix": true
    }
  ],

}

配置好后，当我们保存时，VScode编辑器会根据我们eslint的配置进行部分格式化

# 忽略格式化

对于不需要格式化的文件添加到.prettierignore中进行忽略，或在文件中使用/* prettier-ignore */注释进行忽略

# git提交格式化

# style样式规则

# 安装

定义样式规则可以使StyleLint (opens new window)

StyleLint的常用规则再这里 (opens new window)

首先我们安装stylelint

npm install -d -save-dev stylelint

npm install stylelint-config-standard stylelint-order --save-dev

stylelint是运行工具
stylelint-config-standard 是stylelint的推荐配置
stylelint-order 是CSS属性排序插件(先写定位，再写盒模型，再写内容区样式，最后写 CSS3 相关属性)

# 配置

然后我们创建配置文件.stylelintrc.js

module.exports = {
  plugins: [],
  extends: ["stylelint-config-standard"], // 这是官方推荐的方式
  rules: {
    "at-rule-empty-line-before": "always"|"never",
    "at-rule-name-case": "lower"|"upper",
    "block-no-empty": true,
  },
  ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts'],
}

plugins配置项，可以为stylelint扩展插件，如：stylelint-declaration-block-no-ignored-properties (opens new window) 该插件禁止由于同一规则中的另一个属性值而被忽略的属性值（如a { display: inline; width: 100px; }）;
extends继承，可以继承一些规则，如： stylelint-config-css-modules (opens new window)接受css模块语法； stylelint-config-prettier (opens new window)关闭所有不必要或可能与Prettier冲突的规则。
rules 配置股则
ignoreFiles 忽略检测的文件

# 运行

配置完成后我们可以再package.json中添加执行配置

{
  "scripts": {
    "lint:style": "stylelint --fix \"src/**/*.less\" --syntax less",
  }
}

# 项目构建

# 使用ESLint（7.32.0）

# 安装ESLint

# 配置ESLint

# ESLint检测React

# ESLint检测Vue

# ESLint检测TypeScript

# 忽略ESLint

# 格式化代码

# prettier格式化

# 基本使用

# 和ESLint一起使用

# VScode根据eslint格式化

# 忽略格式化

# git提交格式化

# style样式规则

# 安装

# 配置

# 运行

# 使用Git commit 规范

# 使用Typescript

# 使用文档

# 皮肤配置

# 权限管理

# 优化项目