我理解的前端代码规范指南 - ESLint 篇

简介: 我理解的前端代码规范指南 - ESLint 篇

前言


JavaScript 是动态弱类型语言,没有预编译程序,比较容易出错,所以在项目编码阶段,我们经常用 ESLint 来做代码静态检查,它通过可配置的代码规范对项目代码进行校验,并在检测到异常时给出警告或错误信息。

本文主要解决两个问题:

一、介绍几种常用的 ESLint 配置方法;

二、解答如下几点疑问:

  1. ESLintstandard 、Prettier 三者的区别?
  2. ESLint vscode 插件和 项目中配置 eslint.js 的区别?
  3. 不同技术栈的 ESLint 配置区别?
  4. 为什么配置 ESLint 需要装这么多包?它们分别的含义和用法是什么?(babel-eslint、eslint-config-prettier...)

主流技术栈配置流程


webpack 项目配置 ESLint 的全流程


  1. package.jon 配置如下包 (版本相互匹配就行)


"eslint": "^7.32.0",
"eslint-config-standard": "^16.0.3",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^5.2.0",
"eslint-plugin-vue": "^8.6.0", // 只针对 vue 项目需要安装
"eslint-webpack-plugin": "^3.1.1",


  1. 根目录新增 eslintrc.js 文件


module.exports = {
  env: {
    browser: true,
    node: true,
    es6: true,
    commonjs: true
  },
  globals: {
    NODE_ENV: true,
    App: true,
    Page: true,
  },
  extends: ['plugin:vue/essential', 'standard', 'plugin:prettier/recommended'],
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module'
  },
  plugins: ['vue'],
  rules: {
    'no-async-promise-executor': 'off',
    'no-misleading-character-class': 'off',
    'no-useless-catch': 'off',
    'prefer-promise-reject-errors': 'off',
    'no-new': 'off',
    'no-array-constructor': 'off',
    'no-unused-vars': 'off',
    'vue/multi-word-component-names': 'off',
    'vue/require-prop-type-constructor': 'off'
  }
}


  1. webpack config 的 plugins 里面引入


const ESLintPlugin = require('eslint-webpack-plugin')
plugins: [
  new ESLintPlugin()
]


vue-cli 项目配置 ESLint 的流程


vue-cli 这种脚手架搭建的项目和纯 webpack 搭建流程的区别,主要是 vue-cli 提供了 @vue/cli-plugin-eslint 插件, 插件可以修改 webpack 的内部配置,也可以向 vue-cli-service 注入命令,不需要自己再一个个安装所有依赖的包,相当于把 eslint 的环境安装过程尽量简化了。

vue add @vue/eslint === vue add @vue/cli-plugin-eslint, 它相当于做了两件事,安装包和 invoke 运行,等价于 npm install -D @vue/cli-plugin-eslint + vue invoke eslint详细解释

总体上,vue-cli 项目里面配置 eslint 使用  @vue/cli-plugin-eslint 会更简单。


react 和 vue3 新项目配置 ESLint 的流程


  1. npm install eslint
  2. eslint --init

经过一系列交互操作后,就会在根目录生成 .eslintrc.js 文件, 并且在 package.json 安装如下包


"babel-eslint": "7.2.4",  
"eslint": "4.10.1",  
"eslint-config-react-app": "^2.1.1",  
"eslint-loader": "1.9.0",  
"eslint-plugin-flowtype": "2.39.1",  
"eslint-plugin-import": "2.8.0",  
"eslint-plugin-jsx-a11y": "5.1.2",  
"eslint-plugin-react": "7.4.0",


1687782930809.png


相关包介绍


01 babel-eslint


Eslint 支持不同的解析器(parser),而 babel-eslint 就是 babel 为 Eslint 开发的语法解析器,使 Eslint 可以支持 ES6 语法,当初 ESLint 之所以能反超 JSLint 和 JSHint,成为 JavaScript 最流心的 Lint 工具,babel-eslint 的助力还是蛮大的。

不过这个包快停止更新了,后面可以用 @babel/eslint-parser 替代。

babel-eslint is now @babel/eslint-parser. This package will no longer receive updates


02 eslint-config-prettier


ESLint 主要做代码质量约束,但是它其实也具备一定的代码风格和格式化能力,这一点可能和 prettier 这个专门做格式化的工具有冲突,所以我们一般禁用掉 ESLint 的格式化规则,eslint-config-prettier 这个就是做这件事,它会默认关闭所有不必要的或可能与 [Prettier] 冲突的规则。


{
  "extends": [
    "prettier" // prettier 等价于 eslint-config-prettier
  ]
}


03 eslint-plugin-prettier


关掉了 ESLint 的格式化规则,只能保证执行 ESLint  不会和 Prettier 冲突,但是并没有把两者结合起来,不符合 Prettier 标准的代码并不会报 ESLint 错误;

所以 eslint-plugin-prettier 插件就是解决这件事的,它会将 prettier 作为 ESLint 的规则来使用,相当于代码不符合 Prettier 的标准时,会报一个 ESLint 错误,同时也可以通过 eslint --fix 来进行格式化。


{
  "extends": ["prettier"], 
  "plugins": ["prettier"], // prettier 等价于 eslint-plugins-prettier
  "rules": {
    "prettier/prettier": "error",
    "arrow-body-style": "off",
    "prefer-arrow-callback": "off"
  }
}


// 简化写法,和上面等价, 推荐!!!
{
  "extends": ["plugin:prettier/recommended"]
}


04 eslint-plugin-vue


eslint-plugin-vue 是 Vue.js 的官方 ESLint 插件,这个插件允许我们使用 ESLint 检查文件的 <template>,以及文件中的 Vue 代码。<script>``.vue``.js

这个插件提供了一些预定义的配置选项:

  • "plugin:vue/base" 基础用法。

用于 vue 3.x

  • "plugin:vue/vue3-essential" 加上防止错误或意外行为的规则。
  • "plugin:vue/vue3-strongly-recommended"  加上可显着提高代码可读性和/或开发体验的规则。
  • "plugin:vue/vue3-recommended" 加上强制执行主观社区默认设置以确保一致性的规则。

使用 Vue 2.x 的配置

  • "plugin:vue/essential" 加上防止错误或意外行为的规则。
  • "plugin:vue/strongly-recommended" 加上可显着提高代码可读性和/或开发体验的规则。
  • "plugin:vue/recommended" 加上强制执行主观社区默认设置以确保一致性的规则。

建议用法


module.exports = {
extends: ['plugin:vue/recommended'],
}


05 @vue/cli-plugin-eslint


这是针对 vue-cli 项目的插件,如上 vue-cli 项目配置 部分已经有所介绍。


eslintrc.js 文件相关概念理解


01 plugin


支持的第三方插件,以 eslint-plugin-vue 为例,可以省略 eslint-plugin-, 可以这样配置 plugins: ['vue'], 就

This plugin allows us to check the <template> and <script> of .vue files with ESLint, as well as Vue code in .js files.


02 glovals


脚本在执行期间访问的额外的全局变量,配置后这个变量就不会报错了。


03 extends


可以理解为一份 eslint rules 的拓展,它配置的内容实际上就是一份份别人配置好的 .eslintrc.js,你也认为,extends == plugin + rules


04 parseOptions 里的 parser


语法解析器,不同语言和框架可能需要使用不同的解析器。


ESLint vscode 插件和 项目中配置 eslint.js 的区别?


The extension uses the ESLint library installed in the opened workspace folder. If the folder doesn't provide one the extension looks for a global install version. If you haven't installed ESLint either locally or globally do so by running npm install eslint in the workspace folder for a local install or npm install -g eslint for a global install.


如上官方所言,eslint 插件实际上并不能单独使用,它没有在本地配置一套开箱即用的 eslint.js 库,而是从当前项目里、全局环境查找,使用第一个匹配到的 eslint.js 库以及配置规则(这点和 prettier 不同);

可以在 vscode 控制面板里验证:


1687782918209.png


这样有个好处,就是可以完美匹配每个不同的项目 eslint 版本。

所以 ESLint 插件最大的功能其实是:

  1. 不符合 ESLint 规则的代码加上一些下划线之类的语法提示;
  2. 配置自动保存时候直接修复 fix;

总结


本文介绍了几种主流的技术栈下 ESLint 的配置方式,然后对涉及到的 npm 包进行了讲解,有助于我们加深对 代码 Lint 机制的理解;

另外也对 vscode 插件和 npm 包之间的关系进行了分析,知道了ESLint Vscode 插件本身并没有下载 eslint.js 代码和默认配置文件,而是优先从项目中、系统中查询,没有找到的话就不会进行校验。

目录
相关文章
|
17天前
|
前端开发 JavaScript 测试技术
前端研发链路之代码规范
大家好,我是徐徐。本文将探讨前端研发链路中的代码规范,包括业界流行规范、CSS命名规范和相关工具。通过保持代码整洁和一致性,不仅能提高团队协作效率,还能减少错误,提升开发质量。文中详细对比了几种常见的代码规范和工具,如 Airbnb Style Guide、BEM、Eslint 和 Prettier,并展望了未来代码规范的发展趋势。希望对大家有所帮助。
53 1
前端研发链路之代码规范
|
24天前
|
前端开发 开发工具 git
如何清理 docker 磁盘空间+修改 Gitea 服务器的 Webhook 设置+前端一些好学好用的代码规范-git hook+husky + commitlint
如何清理 docker 磁盘空间+修改 Gitea 服务器的 Webhook 设置+前端一些好学好用的代码规范-git hook+husky + commitlint
26 5
|
2月前
|
前端开发 JavaScript 开发工具
前端项目增加eslint全过程
如何在前端项目中安装并配置ESLint和Prettier,包括VSCode插件的安装、npm包的全局安装、.eslintrc.js配置文件的生成以及编辑器设置的调整。
34 6
|
11天前
|
前端开发 JavaScript 开发工具
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(三)
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(三)
22 0
|
11天前
|
Web App开发 前端开发 JavaScript
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(二)
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(二)
28 0
|
11天前
|
Web App开发 移动开发 前端开发
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(一)
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(一)
31 0
|
24天前
|
前端开发 开发工具 git
搭建Registry&Harbor私有仓库、Dockerfile(八)+前端一些好学好用的代码规范-git hook+husky + commitlint
搭建Registry&Harbor私有仓库、Dockerfile(八)+前端一些好学好用的代码规范-git hook+husky + commitlint
18 0
|
2月前
|
监控 前端开发 开发者
前端代码规范 - 日志打印规范
前端代码规范 - 日志打印规范
|
2月前
|
移动开发 前端开发 JavaScript
前端代码规范
前端开发工具组件的广泛应用提升了开发效率,但也带来了代码管理和维护的挑战。为解决这一问题,各团队制定了相应的代码规范。良好的代码规范不仅提升个人代码质量,还便于团队协作。本文从命名、HTML、CSS、JavaScript等方面详细介绍了前端代码规范,强调简洁、有条理、易读的重要性。遵循这些规范,有助于提高开发效率和代码质量。
54 0
|
3月前
|
JavaScript 前端开发 开发者
【颠覆你的前端世界!】VSCode + ESLint + Prettier:一键拯救Vue代码于水深火热之中,打造极致编程体验之旅!
【8月更文挑战第9天】随着前端技术的发展,保持代码规范一致至关重要。本文介绍如何在VSCode中利用ESLint和Prettier检查并格式化Vue.js代码。ESLint检测代码错误,Prettier保证风格统一。首先需安装VSCode插件及Node.js包,然后配置ESLint和Prettier选项。在VSCode设置中启用保存时自动修复与格式化功能。配置完成后,VSCode将自动应用规则,提升编码效率和代码质量。
391 1