前端工程化之---代码规范

eslint

ESLint 是一个可配置的 JavaScript 检查器。它可以帮助你发现并修复 JavaScript 代码中的问题,目的是为了统一风格

1、下载：npm install eslint --save-dev

2、在根目录创建配置文件.eslintrc.cjs

3、在根目录创建忽略文件.eslintrcignore文件

.eslintrc.cjs部分配置

module.exports = {
  // 指定一个解析器，比如 @babel/eslint-parser 用于解析 ES6+ 代码。
  parser: '@babel/eslint-parser',
  // 用于继承一个或多个 ESLint 插件的规则，比如 eslint:recommended 或 plugin:react/recommended。 
  extends: [
    'eslint:recommended',
    'plugin:react/recommended'
  ],
  // 指定一个或多个 ESLint 插件。
  plugins: [
    'react'
  ],
  // 指定一个或多个环境，ESLint 会根据指定的环境来启用全局变量。
  env: {
    browser: true,
    es6: true
  },
  // 指定一个或多个全局变量。
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly'
  },
  // 直接在这里定义规则。
  rules: {
    'react/jsx-uses-react': 'error',
    'react/jsx-uses-vars': 'error',
    'no-unused-vars': 'warn',
    'no-console': 'off'
  }
};

prettier

prettier 的作用是对代码进行风格检查，针对的文件类型更加全面，例如js、ts、css、html、json、md等。这些可以通过配置进行检测。

1、安装：npm install prettier --save-dev

2、在项目根目录下创建.prettierrc文件，配置规则

3、在根目录下创建.prettierignore文件，配置忽略检查的文件

.prettierrc文件少量配置可参考

{
  "printWidth": 120, // 指定每行代码的最大长度。
  "tabWidth": 2, // 指定一个制表符的宽度
  "useTabs": false, // 指定是否使用制表符进行缩进。
  "semi": true, // 指定是否在语句末尾添加分号。
  "singleQuote": false, // 指定是否使用单引号或双引号。
  "trailingComma": "none", // 指定是否在多行结构的最后一行添加逗号。
  "bracketSpacing": true, // 指定是否在对象字面量的括号之间添加空格。
  "arrowParens": "avoid", // 指定箭头函数参数是否使用括号。
  "vueIndentScriptAndStyle": true, // 指定是否在 Vue 单文件组件中缩进
  "endOfLine": "auto" // 指定换行符的类型。
}

如果eslint配置和prettier配置出现冲突解决办法

插件一：eslint-config-prettier

这是一个 ESLint 配置规则的包，它将禁用与 Prettier 冲突的 ESLint 规则。使用 `eslint-config-prettier` 可以确保 ESLint 规则与 Prettier 的代码格式化规则保持一致，避免二者之间的冲突。

插件二：eslint-plugin-prettier 

这是一个 ESLint 插件，它将 Prettier 应用到 ESLint 中。它会使用 Prettier 来格式化代码，并将格式化结果作为 ESLint 的一项规则来检查代码。使用 `eslint-plugin-prettier` 可以在代码检查的同时，自动格式化代码，使其符合 Prettier 的规则。

通常情况下，您需要同时安装这两个包来实现 ESLint 和 Prettier 的集成。首先，使用 `eslint-config-prettier` 禁用与 Prettier 冲突的 ESLint 规则，然后使用 `eslint-plugin-prettier` 将 Prettier 应用到 ESLint 中，以便在代码检查时自动格式化代码。

下面是一个示例 `.eslintrc.js` 配置文件，展示了如何同时使用 `eslint-config-prettier` 和 `eslint-plugin-prettier` ：

module.exports = {
    extends: ["eslint:recommended", "plugin:prettier/recommended"],
    plugins: ["prettier"],
    rules: {
        // 可以添加其他自定义规则
    },
};