lint-config-web

用于智能化react技术栈项目的编码语法规范、格式规范检查, 及保存文件时, 根据此规范，编辑器中提示或自动fix或通过prettier进行格式化。

包含四部分:

1. js、ts的编码规范、输写规范： eslint的规范";
2. 样式编码规范: stylelint;
3. 格式化处理: prettier;
4. git提交时lint检查: husky、lint-staged; (lint验查失败、git提交会被阻止)

安装vscode插件

为了在编辑代码文件时，或保存文件时，能够通过编辑器功能（高亮波浪下划线）：

1. 提示eslint检验后错误项，并支持在保存时自动修复能修复的，如强制单引、强制缩进；
2. 在输入、保存、粘贴时，根据prettier规则自动格式化: 强制单引、强制缩进、是否换行；

播件有：

• ESlint
• Prettier - Code formatter

在项目中进行配置

第一步：安装依赖(在项目根目录终端执行)

npm i lint-config-web --save-dev -S

npm run lint-config-web

第二步：项目的package.json加上scripts、husky、lint-staged

{
  ...
  "scripts": {
    ...
    "lint": "npm run lint:js && npm run lint:style",
    "lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx ./src",
    "lint:style": "stylelint --fix \"src/**/*.less\" --syntax less",
    "prettier": "prettier -c --write \"**/*\"",
    "lint-staged": "lint-staged"
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint-staged"
    }
  },
  "lint-staged": {
    "**/*.less": "stylelint --syntax less",
    "**/*.{js,jsx,ts,tsx}": "npm run lint"
  },
  ...
}

第三步：lint初始化

npm run lint:init

lint初始化，会在项目根目录创建或修改以下文件, 目的是把lint-config-web中的规则应用到当前项目中，.vscode > settings.json中的内容，定义了当前项目，在编辑是、保存时，是否进行eslint修复及prettier自动格式化。

• .vscode
  • settings.json //根据当前项目在保存时定义:1)eslint检查,自动修复, 2)是否prettier自动化格式
• .editorconfig //编辑器中新建文件时，会以这个配置定义缩进、charset等
• .eslintignore //不进行eslint检查的文件
• .eslintrc.js //lint-config-web eslint规则的引入, 并且可以在这增加规则项。
• .prettierignore //不进行自动格式化的文件
• .prettierrc.js //lint-config-web prettier规则的引入
• .stylelintrc.js //lint-config-web stylelint规则的引入