面向团队的前端代码规范

说在前面

本文的代码风格为笔者偏好，用于笔者所在的团队，文章仅提供配置思路和选择项参考

规范基于 ES6 语法，可能与一些现有的项目不匹配

前端规范要 5 个插件：

ESLint
Prettier
commitLint
styleLint
husky

以及一个配置文件：

.editorconfig

不同编辑器可能需要插件等一些手段来支持这些工具， VSCode 配置比较方便，ESLint, Prettier, editorconfig 安装插件即可

后期团队内可能会构建一个脚手架，方便直接安装必要的包，~~现在还是老老实实复制粘贴代码吧~~

必要的依赖

"devDependencies": {
  "eslint": "^8.0.1",
  "eslint-config-prettier": "^8.5.0",
  "eslint-config-standard": "^17.0.0",
  "eslint-plugin-import": "^2.25.2",
  "eslint-plugin-n": "^15.0.0",
  "eslint-plugin-prettier": "^4.0.0",
  "eslint-plugin-promise": "^6.0.0",
  "eslint-plugin-react": "^7.29.4",
  "prettier": "^2.6.2",
}

ESLint

// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: ["standard", "plugin:prettier/recommended"],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: "latest",
    sourceType: "module"
  },
  plugins: ["react", "@typescript-eslint"],
  rules: {
    semi: ["error", "always"],
    quotes: [1, "double"]
  }
};

Prettier

.prettierrc.json

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "bracketSpacing": true,
  "endOfLine": "lf"
}

.prettierignore

# Ignore artifacts:
build
coverage

# Ignore all HTML files:
*.html

editorconfig

root = true

[*]
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
indent_style = space
indent_size = 2
charset = utf-8