前端规范化标准

最新推荐文章于 2025-04-24 11:05:00 发布

wsq_bsdn

最新推荐文章于 2025-04-24 11:05:00 发布

阅读量860

点赞数

分类专栏：笔记文章标签：前端 webpack gulp

本文链接：https://blog.youkuaiyun.com/wsq_bsdn/article/details/112037394

版权

笔记专栏收录该内容

5 篇文章

订阅专栏

本文介绍了前端规范化标准的重要性，强调了代码标准化在多人协作中的价值。文章详细讲解了如何使用ESLint进行代码质量检测，包括安装、运行、配置以及规则设定。此外，还提到了Prettier作为代码格式化工具的使用方法，以及如何通过husky和lint-staged在Git钩子中集成这两个工具，以确保代码风格的一致性和质量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

规范化标准是践行前端工程化的重要组成部分。

为什么需要规范化标准
软件开发通常需要多人协同，不同的开发者有不同的编码习惯和喜好，不同的习惯和喜好会增加项目维护成本，所以每个项目或团队需要明确统一的标准。

哪里需要规范化标准
开发过程中人为编写的一切。如代码、文档、纪要甚至是提交日志，其中代码的标准化规范尤为重要，因为代码的质量关于项目的质量以及项目后期的维护成本。

实施规范化的方法

编码前人为约定
通过工具实现Lint

ESLint

基本介绍
1. ESLint是当前最为主流的javascript Lint 工具，用于监测 js 代码质量
2. ESLint 很容易统一开发者的编码风格
ESLint安装：直接使用yarn add eslint/npm install eslint 安装即可
ESLint使用
1. 通过yarn或npx来运行eslint ，或者在package.json的scripts来配置命令，然后通过npm或yarn来运行。命令行格式为：eslint file ， file 可以是一个指定的文件，也可以是一个路径通配符。
2. 运行eslint检查代码之前，需要先新建一个eslint的配置文件.eslintrc文件(可以通过eslint --init命令来生成配置文件)，文件后缀名可以是.js，.json亦或是没有后缀名。或者在package.json中添加 eslintConfig 配置来配置eslint。
```
"scripts": {},
"eslintConfig": {
  "env": { 
    "browser": false, 
    "es2021": true
  },
  "extends": [
    "standard"
  ],
  "parserOptions": {
    "ecmaVersion": 12
  },
  "rules": {
  }
},
```
3. 运行eslint之后，首先会输出代码语法错误，需要手动将语法错误改正过来之后，再次运行eslint命令，才会去检查代码风格。
4. 运行eslint file --fix可以修正一些代码风格，然后将一些仍未被修正的语法问题输出到控制台。需要开发人员手动一条一条修复。
eslint 配置文件配置值选项说明
1. env：指定你想启用的环境，并设置它们为 true，可以同时开启多个环境。
  下面是eslint支持的环境表
  
  如果想在一个特定的插件中使用一种环境，确保提前在 plugins 数组里指定了插件名，然后在 env 配置中不带前缀的插件名后跟一个 /。
```
module.exports = {
  env: { // 运行环境设置
    browser: false, // 如果设置为false，则不能使用除了globals中定义的全局变量，如window，alert，document等
    es2021: true,
    'example/custom': true
  },
  pugins: ['example'],
  extends: [// 继承的配置
    'standard'
  ],
  parserOptions: {
    ecmaVersion: 12
  },
  rules: {
  }
}
```
2. extends：指定继承某一些共享配置
3. parserOptions：指定你想要支持的 JavaScript 语言选项。默认情况下，ESLint 支持 ECMAScript 5 语法。该选项只是检测语法，支持 ES6 语法并不意味着同时支持新的 ES6 全局变量或类型。对于 ES6 语法，使用 { "parserOptions": { "ecmaVersion": 6 } }；对于新的 ES6 全局变量，使用 { "env":{ "es6": true } }. { "env": { "es6": true } } 自动启用es6语法，但 { "parserOptions": { "ecmaVersion": 6 } } 不自动启用es6全局变量。
4. rules：eslint规则设置。要改变一个规则设置，你必须将规则 ID 设置为下列值之一：
  1. off 或 0：表示关闭规则
  2. warn 或 1 ：开启规则，使用警告级别的错误：warn
  3. error 或 2 ：开启规则，使用错误级别的错误：error
```
{
    "rules": {
        "eqeqeq": "off",
        "curly": "error",
        "quotes": ["error", "double"]
    }
}
```
  也可以在文件注释里配置规则
```
/* eslint eqeqeq: "off", curly: "error" */
/* eslint eqeqeq: 0, curly: 2 */
```
  如果一个规则有额外的选项，可以使用数组字面量指定它们。数组的第一项总是规则的严重程度（数字或字符串）
```
/* eslint quotes: ["error", "double"], curly: 2 */
```
5. globals：配置全局变量，为一个对象，该对象包含以你希望使用的每个全局变量。对于每个全局变量键，将对应的值设置为 “writable” 以允许重写变量，或 “readonly” 不允许重写变量。
```
{
    "globals": {
        "var1": "writable",
        "var2": "readonly"
    }
}
```
  也可以通过在js中使用注释来定义全局变量，定义的全局变量默认情况下是只读的
```
/* global var1, var2 */
```
  如果想选择性地指定这些全局变量可以被写入(而不是只被读取)，那么你可以用一个 writable 的标志来设置它们
```
/* global var1:writable, var2:writable */
```
6. 配置注释
  在文件中使用以下格式的块注释来临时禁止规则出现警告：
```
/* eslint-disable */
alert('foo');
/* eslint-enable */
```
  也可以对指定的规则启用或禁用警告
```
/* eslint-disable no-alert, no-console */
alert('foo');
console.log('bar');
/* eslint-enable no-alert, no-console */
```
  如果在整个文件范围内禁止规则出现警告，将 /* eslint-disable */ 块注释放在文件顶部，并且不出现/* eslint-enable */ 块注释
```
/* eslint-disable */
alert('foo');
```
  也可以对整个文件启用或禁用指定规则警告:
```
/* eslint-disable no-alert */
// Disables no-alert for the rest of the file
alert('foo');
```
  在文件中使用以下格式的行注释或块注释在某一特定的行上禁用所有规则
```
alert('foo'); // eslint-disable-line
// eslint-disable-next-line
alert('foo');
/* eslint-disable-next-line */
alert('foo');
alert('foo'); /* eslint-disable-line */
```
  在某一特定的行上禁用某些指定的规则：
```
alert('foo'); // eslint-disable-line no-alert, quotes, semi
// eslint-disable-next-line no-alert
alert('foo');
alert('foo'); /* eslint-disable-line no-alert, quotes, semi */
/* eslint-disable-next-line no-alert */
alert('foo');
```
  上面的所有方法同样适用于插件规则。例如，禁止 eslint-plugin-example 的 rule-name 规则，把插件名（example）和规则名（rule-name）结合为 example/rule-name：
```
foo(); // eslint-disable-line example/rule-name
foo(); /* eslint-disable-line example/rule-name */
```
eslint 和 gulp 结合使用
通过gulp-eslint插件来结合gulp使用
1. 在gulp管理的项目中开发依赖安装 eslint和gulp-eslint
2. 添加eslint配置文件或将配置对象传入gulp-eslint
3. 修改编译js文件的任务，在js文件经过babel转换之前先经过gulp-eslint处理
4. 默认情况下 eslint 只会检查代码，不会根据检查的结果做出反馈。所以需要我们手动调用gulp-eslint的format方法输出eslint的检查结果，并在出现错误时，标志任务失败。
```
const script = () => {
  return src('src/assets/scripts/*.js', { base: 'src' })
    .pipe(plugins.eslint())
    .pipe(plugins.eslint.format())
    .pipe(plugins.eslint.failAfterError())
    .pipe(plugins.babel({ presets: ['@babel/preset-env'] }))
    .pipe(dest('temp'))
    .pipe(bs.reload({ stream: true }))
}
```

eslint 和 webpack 结合使用

在webpack管理的项目中开发依赖安装 eslint和eslint-loader

添加eslint配置文件，如果是使用了某个js框架（如React），需要添加添加对应的框架的支持，在plugins中添加该框架对应的插件，并继承该框架的使用的语法规范。

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'plugin:react/recommended',
    'standard'
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 12,
    sourceType: 'module'
  },
  plugins: [
    'react'
  ],
  rules: {
  }
}

对js文件使用eslint-loader处理，需要保证eslint-loader在所有loader处理之前对js文件进行处理，通过添加enforce:'pre'来实现。
```
{
  test: /\.js$/, 
  exclude: /node_modules/, 
  use: 'eslint-loader',
  enforce: 'pre' // 保证在其他loader之前执行
}
```

eslint检查typescript
1. 安装 eslint 和 typescript（必须在初始化配置文件之前安装，不然初始化文件时选择typescript支持时会报错）
2. 初始化eslint配置文件，选择时添加 typescript 支持。
3. 运行命令行（yarn eslint file）检查.ts文件
stylelint的使用
stylelint的使用和eslint基本类似
1. 首先安装依赖，stylelint
2. 创建配置文件，.stylelintrc/.stylelintrc.js/stylelint.config.js/stylelint.config.cjs（"type":"module"模式下）或者在package.json中添加配置项stylelint
```
module.exports = {
  extends: [
    "stylelint-config-standard",
    "stylelint-config-sass-guidelines"
  ]
}
```
```
{
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "stylelint": "^13.8.0",
    "stylelint-config-sass-guidelines": "^7.1.0",
    "stylelint-config-standard": "^20.0.0"
  },
  "stylelint": {
    "extends": [
      "stylelint-config-standard",
      "stylelint-config-sass-guidelines"
    ]
  }
}
```
3. 选择要继承的规范（如standard），安装该规范对应的插件stylelint-config-standard，并在配置文件中的extends选项中添加，注意需要添加插件的全名。
4. 添加sass/less语法校验，重复第3步操作，只是把插件换成对应的插件。
Prettier的使用
Prettier是一款通用的前端代码格式化工具，可以完成所有前端代码的格式化。
1. Prettier的使用非常简单，只需要安装完Prettier之后，运行命令行yarn prettier file就可以对指定的文件进行检查。
2. Prettier 默认会将格式化之后的代码输出到控制台上，如果需要将格式化之后的代码覆盖到源文件上，只需要添加 --write 参数。
3. 如果想要对根目录下所有文件进行格式化，需要将flie替换成.

Git Hooks
Git Hooks又称git钩子，每个钩子都对应一个任务，如commit、push等。通过shell脚本可以编写钩子任务触发时要具体执行的操作。

Husky可以实现不通过shell脚本来实现 Git Hooks的使用需求。

安装 husky 作为开发依赖

在package.json中配置 husky，为钩子定义任务。

{
  "main": "index.js",
  "repository": "https://github.com/sqw2016/homework2-2.git",
  "author": "wushaoqing <337193272@qq.com>",
  "license": "MIT",
  "scripts": {
    "precommit": "eslint index.js"
  },
  "devDependencies": {
    "eslint": "^7.17.0",
    "eslint-config-standard": "^16.0.2",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "husky": "^4.3.6"
  },
  "husky": {
    "hooks": {
      "pre-commit": "yarn precommit"
    }
  }
}

如果要在代码检查之后对代码进行强制格式化，并将代码添加到暂存区则需要使用lint-staged

首先安装 lint-staged 作为开发依赖
配置 lint-staged。通过在package.json中添加 lint-staged 属性进行配置， lint-staged 属性接收一个键值对对象，键为文件通配字符串，值为对匹配到的文件需要执行的命令，可以是一个数组，如果是一个数组的话，则会按照数组顺序依次执行多个命令。
```
"lint-staged": {
  "*.js": [
    "eslint",
    "git add"
  ]
}
```

将scripts中的执行命令改为lint-staged。

"scripts": {
    "precommit": "lint-staged"
  },

完整配置如下

{
  "main": "index.js",
  "repository": "https://github.com/sqw2016/homework2-2.git",
  "author": "wushaoqing <337193272@qq.com>",
  "license": "MIT",
  "scripts": {
    "precommit": "lint-staged"
  },
  "devDependencies": {
    "eslint": "^7.17.0",
    "eslint-config-standard": "^16.0.2",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "husky": "^4.3.6",
    "lint-staged": "^10.5.3"
  },
  "husky": {
    "hooks": {
      "pre-commit": "yarn precommit"
    }
  },
  "lint-staged": {
    "*.js": [
      "eslint",
      "git add"
    ]
  }
}