前端编码规范检查

    90

统一团队的代码规范，以react项目为例子，举一反三

”eslint“: javascript代码检测工具
"stylelint": css检测工具
"stylelint-config-standard": stylelint的推荐配置
"stylelint-order": css属性排序插件，合理的排序加快页面渲染
"stylelint-scss": 增加支持scss语法
"husky+lint-staged"：commit时候代码检查

{
"devDependencies": {
    "@babel/core": "^7.14.8",
    "@babel/plugin-transform-runtime": "^7.14.5",
    "@babel/preset-env": "^7.14.9",
    "@babel/preset-react": "^7.14.5",
    "@babel/preset-typescript": "^7.14.5",
    "@babel/runtime-corejs3": "^7.14.9",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.1",
    "@types/react-dom": "^17.0.9",
    "@typescript-eslint/eslint-plugin": "^4.29.1",
    "@typescript-eslint/parser": "^4.29.1",
    "babel-loader": "^8.2.2",
    "cross-env": "^7.0.3",
    "css-loader": "^6.2.0",
    "css-minimizer-webpack-plugin": "^3.1.1",
    "dotenv": "^10.0.0",
    "dotenv-webpack": "^7.0.3",
    "eslint": "^7.32.0",
    "eslint-config-google": "^0.14.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-react": "^7.24.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "html-webpack-plugin": "^5.3.2",
    "husky": "^7.0.2",
    "lint-staged": "^11.1.2",
    "mini-css-extract-plugin": "^2.4.2",
    "postcss-loader": "^6.2.0",
    "postcss-preset-env": "^6.7.0",
    "prettier": "^2.3.2",
    "react-refresh": "^0.10.0",
    "sass": "^1.40.1",
    "sass-loader": "^12.1.0",
    "style-loader": "^3.2.1",
    "stylelint": "^13.13.1",
    "tsconfig-paths-webpack-plugin": "^3.5.1",
    "typescript": "^4.3.5",
    "webpack": "^5.48.0",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2",
    "webpack-merge": "^5.8.0"
  }
 }

tsconfig

tsconfig.json 文件包含了 TypeScript 编译器的配置信息

Vue

在一个 Vue TypeScript 项目中，下面是一个常用的配置：

React

在一个 React TypeScript 项目中，下面是一个常用的配置：

{
  "compilerOptions": {
    "target": "es6",
    "module": "esnext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "jsx": "react",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src"]
}

eslint+prettier

Vue 

# 按照依赖
npm install --save-dev eslint prettier eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier husky lint-staged

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "plugin:vue/essential",
    "eslint:recommended",
    "prettier",
    "prettier/vue",
  ],
  plugins: ["vue", "prettier"],
  parserOptions: {
    parser: "babel-eslint",
  },
  rules: {
    "prettier/prettier": [
      "error",
      {
        printWidth: 100,
        semi: true,
        singleQuote: true,
        trailingComma: "es5",
        arrowParens: "always",
      },
    ],
  },
};

// .prettierrc.js
module.exports = {
  printWidth: 100,
  semi: true,
  singleQuote: true,
  trailingComma: "es5",
  arrowParens: "always",
};

//package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.js": [
      "eslint --fix",
      "git add"
    ],
    "*.vue": [
      "eslint --fix",
      "git add"
    ]
  }
}

React

我们使用ESLint来Linting Code

  1. 安装所需要的依赖项
yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev
  1. 在项目根目录下添加.eslintrc.json
{
    "env": {
        "browser": true,
        "es2020": true,
        "node": true
    },
    "extends": [
        "plugin:promise/recommended",
        "plugin:react/recommended",
        "plugin:react-hooks/recommended",
        "plugin:@typescript-eslint/recommended",
        "prettier/@typescript-eslint",
        "plugin:prettier/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2020,
        "sourceType": "module"
    },
    "plugins": [
        "promise",
        "react",
        "@typescript-eslint",
        "react-hooks",
        "prettier"
    ],
    "rules": {
        "prettier/prettier": 2,
        "react-hooks/rules-of-hooks": 2,
        "react-hooks/exhaustive-deps": 1,
        "react/display-name": 0,
        "react/prop-types":0,
        "@typescript-eslint/no-var-requires": 0
    },
    "settings": {
        "react": {
            "version": "detect"
        }
    }
}

.eslintrc.json

{
    "env": {
        "browser": true,
        "es2020": true,
        "node": true
    },
    "extends": [
        "plugin:promise/recommended",
        "plugin:react/recommended",
        "plugin:react-hooks/recommended",
        "plugin:@typescript-eslint/recommended",
        "prettier/@typescript-eslint",
        "plugin:prettier/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2020,
        "sourceType": "module"
    },
    "plugins": [
        "promise",
        "react",
        "@typescript-eslint",
        "react-hooks",
        "prettier"
    ],
    "rules": {
      //0 关闭 1 警告 2 错误
        "prettier/prettier": 2,
        "react-hooks/rules-of-hooks": 2,
        "react-hooks/exhaustive-deps": 1,
        "react/display-name": 0,
        "react/prop-types":0,
        "@typescript-eslint/no-var-requires": 0
    },
    "settings": {
        "react": {
            "version": "detect"
        }
    }
}

yarn add prettier eslint-config-prettier eslint-plugin-prettier --dev

在项目根目录下添加.prettierrc

{
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "endOfLine": "lf",
  "printWidth": 100,
  "bracketSpacing": true,
  "arrowParens": "always",
  "useTabs": false,
  "quoteProps": "as-needed",
  "jsxSingleQuote": true,
  "jsxBracketSameLine": false,
  "requirePragma": false,
  "insertPragma": false,
  "proseWrap": "preserve",
  "htmlWhitespaceSensitivity": "css",
  "vueIndentScriptAndStyle": false,
  "embeddedLanguageFormatting": "auto"
}

husky+lint-staged

Husky 和 lint-staged 是两个常用的 Git 钩子工具，可以帮助我们在 Git 提交前运行一些脚本，如代码风格检查、代码格式化等。

  1. 安装 husky 和 lint-staged：
npm install husky lint-staged --save-dev
  1. 在 package.json 文件中添加 husky 和 lint-staged 的配置：
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.js": ["eslint --fix", "git add"]
  }
}

//.lintstagedrc.mjs
export default {
  "*.js": [
    "eslint --fix",
    "git add"
  ],
  "*.css": [
    "stylelint --fix",
    "git add"
  ]
}

上述配置的意思是在 Git 提交前运行 lint-staged，lint-staged 会检查所有的 .js 文件，对其中的代码运行 eslint --fix 命令进行代码风格检查和格式化，然后再将修改后的代码添加到 Git 中。 3. 在项目中添加 .eslintrc.js 文件来配置 ESLint，这里以 eslint-config-react-app 为例：

module.exports = {
  extends: 'react-app',
  rules: {
    // 在这里添加其他的规则
  }
};
  1. 在 package.json 文件中添加 scripts 来运行代码检查和格式化：
{
  "scripts": {
    "lint": "eslint src",
    "prettier": "prettier src/**/*.js --write"
  }
}

{
  "husky": {
      "hooks": {
          "pre-commit": "lint-staged"
      }
  },
  "lint-staged": {
    "src/**/*.{ts,tsx,js,json,less,md}": [
      "prettier --write"
    ],
    "src/**/*.{ts,tsx,js}": [
      "eslint --config .eslintrc.json"
    ]
  }
}

Babel 

yarn add @babel/preset-env @babel/preset-react @babel/preset-typescript @babel/plugin-transform-runtime -D

babel.config.json

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript"
  ],
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]
}

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "allowJs": true,
    "jsx": "react",
    "declaration": false,
    "downlevelIteration": true,
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "moduleResolution": "node",
    "baseUrl": "./src",
    "paths": {
      "api/*": ["services/*"]
    },
    "types": ["node", "webpack-env"],
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "exclude": ["config", "commitlint.config.js"]
}

.prettierrc

{
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "endOfLine": "lf",
  "printWidth": 100,
  "bracketSpacing": true,
  "arrowParens": "always",
  "useTabs": false,
  "quoteProps": "as-needed",
  "jsxSingleQuote": true,
  "jsxBracketSameLine": false,
  "requirePragma": false,
  "insertPragma": false,
  "proseWrap": "preserve",
  "htmlWhitespaceSensitivity": "css",
  "vueIndentScriptAndStyle": false,
  "embeddedLanguageFormatting": "auto"
}

换行符

一般来说，换行符有两种类型：Windows风格的CRLF（回车换行）和Unix风格的LF（仅换行）。 windows和mac、linux默认的换行符不同，为了方便git版本管理，我们需要统一换行符

配置详解

eol (end of line)

#.gitignore
text eol=lf
*.jpg   binary
*.png   binary
*.gif   binary
*.svg   binary

已有项目更新换行符

  1. Visual Studio Code：在打开的项目中，可以使用“查找和替换”功能来替换换行符。具体步骤如下：
  • 打开要修改的文件夹或项目。
  • 使用快捷键 Ctrl + Shift + F（Windows / Linux）或 Command + Shift + F（macOS）打开“查找和替换”面板。
  • 在“查找”文本框中输入要替换的换行符类型，例如“\r\n”（Windows风格）或“\n”（Unix风格）。
  • 在“替换为”文本框中输入要替换成的换行符类型，例如“\n”（Unix风格）或“\r\n”（Windows风格）。
  • 点击“全部替换”按钮进行批量替换。
  1. WebStorm
  • 打开 WebStorm 并打开要修改的项目。
  • 在 WebStorm 的菜单栏中选择 Edit（编辑）-> Find -> Replace in Path（替换路径中的内容）。
  • 在弹出的对话框中，输入要查找的文本，在“搜索路径”中选择要替换的文件或文件夹，并在“替换为”字段中输入要替换成的换行符类型。
  • 在“options”选项卡中，可以选择要搜索的文件类型，以及是否区分大小写等。
  • 点击“Find”按钮，WebStorm 将在项目中查找符合要求的文本，并在底部面板中显示搜索结果。
  • 点击“Replace”按钮，WebStorm 将批量替换符合要求的文本。

参考链接

评论区
共有评论 0 条
暂无评论