前端代码规范：Prettier+Eslint+Stylelint+Git

Prettier

Prettier 是一个代码格式化工具，它可以自动调整代码的缩进、换行和其他样式规范，以使代码风格保持一致。

Prettier的原理

Prettier的工作原理可以简化为“解析-应用规则-生成”的过程。它通过解析源代码生成AST，然后应用预定义的格式化规则，最后将处理后的AST转换回源代码形式。这一过程确保了代码的一致性和可读性。

安装与配置

• VScode安装Prettier-Code formatter插件，
• 在IDE设置页面的搜索栏中输入"format on save",勾选，确保其值为true。
• 安装依赖到项目中npm install prettier -D
• 在项目根目录新建一个.prettierrc.json的文件

{
   "printWidth": 80, // 指定单行代码长度，超过该长度将会进行换行，默认值为 80
   "tabWidth": 2, // 指定缩进的空格数，默认值为 2
   "useTabs": false, // 是否使用制表符进行缩进，默认为 false，表示使用空格进行缩进
   "semi": true, // 是否在语句末尾添加分号，默认为 true
   "singleQuote": false, // 是否使用单引号，默认为 false，表示使用双引号
   "quoteProps": "as-needed", // 对象属性是否使用引号包裹，默认为 "as-needed"，表示只有必要时才会添加引号
   "trailingComma": "none", // 多行数组或对象最后一个元素后是否添加逗号，默认为 "none"，表示不添加
   "bracketSpacing": true, // 对象字面量中的花括号是否添加空格，默认为 true
   "arrowParens": "avoid" // 箭头函数的参数是否添加圆括号，默认为 "avoid"，表示只有一个参数时省略圆括号
}

ESlint

ESlint是一个用于代码规范的工具,用于识别和报告在 ECMAScript/JavaScript 代码中发现的模式的工具，目的是使代码更加一致，并避免错误。

安装与配置

• 安装ESList，npm install eslint --save-dev
• VScode安装ESLint插件---ESLint
• 生成ESLint配置文件npx eslint --init,完成选项后会创建一个.eslintrc.js配置文件

// .eslintrc.js
module.exports = {
  // 规则配置
  rules: {
    // 可以根据需要启用、禁用和自定义规则
    'rule-name': 'error',
    'other-rule': 'warn',
  },
  
  // 解析器配置
  parser: '@babel/eslint-parser', // 指定使用的解析器
  //指定直接传递给解析器上的 parse() 或 parseForESLint() 方法的其他选项的对象。
  parserOptions: {
    ecmaVersion: 2021, // ECMAScript版本
    sourceType: 'module', // 模块类型（'script' 或 'module'）
    ecmaFeatures: {
      jsx: true, // 启用JSX支持
    },
  },
  
  // 插件配置
  plugins: ['plugin-name'], // 配置要使用的插件
  
  // 扩展配置
  extends: [
    'eslint:recommended', // 使用推荐的ESLint规则
    'plugin-name/recommended', // 使用指定插件的推荐规则
  ],
  
  // 环境配置
  env: {
    browser: true, // 浏览器环境
    node: true, // Node.js环境
    es6: true, // 启用ES6全局变量
  },
  
  // 全局变量配置
  globals: {
    // 可以添加项目中使用的全局变量，避免ESLint报错
    globalVar: 'readonly',
  },
  
  // 文件过滤器
  ignorePatterns: ['node_modules/', 'dist/'], // 忽略指定的文件或目录
  
  // 其他配置
  settings: {
    // 自定义全局变量
    'import/resolver': {
      node: {
        extensions: ['.js', '.jsx'],
        paths: ['src'], // 自定义模块解析路径
      },
    },
  },
  
  // 覆盖特定文件或目录的配置
  overrides: [
    {
      files: ['test/**/*.js'], // 匹配要覆盖的文件
      rules: {
        'no-console': 'off', // 关闭在测试文件中禁用控制台的规则
      },
    },
  ],
  
  // 指定 ESLint 配置文件的根目录
  root: true,
  
  // 禁用在 JavaScript 文件中使用注释行内配置 ESLint 规则
  noInlineConfig: true,
  
  // 在使用了 eslint-disable 注释后报告未使用的禁用指示
  reportUnusedDisableDirectives: true,
  
  // 配置要忽略的文件和目录的匹配模式
  ignore: [
    'node_modules/',
    'dist/',
  ],
};

eslint与prettier的冲突

根本原因就是eslint有部分规则与prettier冲突. 解决方法：安装两个依赖eslint-config-prettier + eslint-plugin-prettier

eslint-plugin-prettier:基于 prettier 代码风格的 eslint 规则，即eslint使用pretter规则来格式化代码。

eslint-config-prettier:禁用所有与格式相关的 eslint 规则，解决 prettier 与 eslint 规则冲突，确保将其放在 extends 队列最后，这样它将覆盖其他配置

• 安装依赖：npm add eslint-config-prettier eslint-plugin-prettier -D

• 在 .eslintrc.json中extends的最后添加一个配置

{ 
    extends: [
    'eslint:recommended',
    'plugin:vue/vue3-essential',
    'plugin:@typescript-eslint/recommended',
+    // 新增，必须放在最后面
+    'plugin:prettier/recommended' 
  ],
}

Stylelint

Stylelint 是一个强大、先进的 CSS 代码检查器，可以帮助你规避 CSS 代码中的错误并保持一致的编码风格。

安装与配置

• VScode安装Stylelint插件
• 在VScode设置中搜索stylelint.enable,设置为true，以启用Stylelint插件
• 在VScode设置中搜索stylelint.config,指定Stylelint配置文件的路径。如果你的配置文件为.stylelintrc.json，则可以设置为：{ "stylelint.config": ".stylelintrc.json" }
• 项目中安装依赖npm install stylelint stylelint-config-standard --save-dev
• 项目根目录下创建名为.stylelintrc.js的文件放置配置信息

    module.exports = {
      extends: [
        'stylelint-config-recommended',
        'stylelint-config-prettier'
      ], // 继承基本配置和Prettier插件的配置

      plugins: [
        'stylelint-order',
        'stylelint-declaration-block-no-ignored-properties'
      ], // 加载自定义插件

      rules: {
        'color-hex-case': 'lower', // 颜色值使用小写字母
        'color-hex-length': 'long', // 颜色值使用长格式
        'font-family-name-quotes': 'always-where-recommended', // 字体名称使用引号
        'function-comma-newline-after': 'always-multi-line', // 多行函数逗号后面必须换行
        'function-comma-space-after': 'always-single-line', // 单行函数逗号后面必须空格
        'function-name-case': 'lower', // 函数名称使用小写字母
        'function-url-quotes': 'always', // 函数URL使用引号
        'max-nesting-depth': 3, // 最大嵌套深度为3
        'no-empty-source': true, // 不允许空的样式文件
        'order/properties-order': [], // CSS属性排序规则
        'property-no-unknown': [ // 不允许未知属性
          true,
          {
            ignoreProperties: ['composes']
          }
        ],
        'selector-max-id': 0, // 不允许使用ID选择器
        'selector-pseudo-element-no-unknown': [ // 不允许未知的伪元素
          true,
          {
            ignorePseudoElements: ['v-deep']
          }
        ],
        'selector-type-no-unknown': [ // 不允许未知的元素类型选择器
          true,
          {
            ignoreTypes: ['/^v-/']
          }
        ]
      }
    }

Git

Commitlint

• 安装npm install @commitlint/cli @commitlint/config-conventional --save-dev
• 在根目录下创建.commitlintrc.js文件进行配置

    module.exports = {
        extends: ['@commitlint/config-conventional'],
    };

Husky

Husky主要作用在Git Hook的pre-commit、commit-msg等部分。它可以帮助你在项目中快速设置和执行Git Hook脚本，使得你可以在代码提交、合并等操作中加入额外的检查和验证。它与pre-commit、commit-msg等Git Hook脚本结合使用，让你可以在代码提交前运行代码格式化工具、静态代码分析工具、单元测试等，以确保提交的代码质量.

Lint-staged

Lint-staged 可以在我们运行 ESlint 或 Stylelint 命令时，可以通过设置指定只检查我们通过 git add 添加到暂存区的文件，可以避免我们每次检查都把整个项目的代码都检查一遍，从而提高效率。

安装和配置

• 安装npm install lint-staged --save-dev
• 在package.json加入如下代码进行配置（ps：要在husky，ESLint 和 Stylelint安装配置完后操作）

 "scripts": {
    "prepare": "husky install",
 },
 "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
 },

"lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.json": [
      "prettier --write"
    ],
    "*.vue": [
      "eslint --fix",
      "prettier --write",
      "stylelint --fix"
    ],
    "*.{scss,less,html}": [
      "stylelint --fix",
      "prettier --write"
    ],
    "*.md": [
      "prettier --write"
    ]
  }

当我们执行 git commit 时，就会触发 husky 的 pre-commit 钩子，调用 lint-staged 命令。而 lint-staged会根据配置对不同类型的文件进行规范检查。