js代码规范(eslint + prettier + airbnb)

随着现在前端工程化项目的大型化和复杂化，越来越多的前端团队也开始注重代码的规范。接下来几篇文章，本人会从JS代码规范，css代码规范，git代码提交规范等进行详细的介绍.

vite + typescript + eslint + prettier

安装vite

vie 是新一代的前端工程化构建工具，首先通过脚手架 生成 vite + typescript + react 前端项目：

yarn create vite vite-react-app --template react-ts

安装成功后进入项目目录

安装 eslint 相关插件

eslint 是一个可组装的js和jsx代码检查工具，本文通过 eslint + prettier + airbnb 进行项目js代码的规范管理。

安装 typescript 相关eslint插件

yarn add eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser -D

• @typescript-eslint/eslint-plugin 为typescript提供lint规则

• @typescript-eslint/parser eslint 的解析器，它利用 TypeScript ESTree 允许ESLint 绘制 TypeScript 源代码

安装 airbnb 相关 eslint插件

yarn add eslint-config-airbnb eslint-plugin-jsx-a11y eslint-plugin-import -D

这些都是 airbnb 相关的 eslint 插件

安装 react 和 prettier 相关eslint插件

yarn add eslint-plugin-react eslint-plugin-react-hooks eslint-config-prettier eslint-plugin-prettier prettier -D

• eslint-plugin-react 为 react 提供 lint 规则。
• eslint-plugin-react-hooks 为 react hooks 提供 lint 规则
• prettier 美化js代码的工具

这些都是 eslint 规范必须的依赖，下一步通过配置文件集成到项目中。

配置 eslint 规范文件

在根目录创建 .eslintrc.js 或者 .eslintrc 文件，eslint内部启动后会自动读取配置文件。

开始编写 eslint配置文件

// .eslintrc.js
module.exports = {
  root: true,
  env: { // 指定环境
    browser: true, // 浏览器
    node: true, // nodejs 运行环境
    es2021: true // es2021
  },
  extends: [ // 从基本配置扩展规则
    'airbnb',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended'
  ],
  parser: '@typescript-eslint/paraser', // 解析器
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12, // js的版本
    sourceType: 'module',
  },
  plugins: [ // 指定处理器
    'react',
    'react-hooks',
    '@typescript-eslint',
    'prettier'
  ],
  rules: [ // 指定规则
    'prettier/prettier': ['error'], // 指定通过prettier的规则检查
  ]
  
}

eslint的规则有很多，具体的可以通过对应的 npm 包网站去查找，这里不展开细讲了。

配置 prettier 文件

在根目录创建 .prettierrc.js 或者 .prettierrc

// .prettierrc.js
module.exports = {
  trailingComma: 'es5',
  tabWidth: 2,
  semi: false,
  singleQuote: true,
  printWidth: 80
}

总结

这里仅仅只是罗列了 airbnb 相关的 eslint 规范，还有 standard等其他自定义的 eslint 规范，大家可以自行去了解，原理跟上面都是异曲同工。希望对大家有所帮助!