代码规范工具

date
Feb 6, 2022
slug
code-tools
status
Published
tags
基础知识
summary
前端工程化必须了解的知识和技能。
type
Post
  • prettier:代码格式化工具,解决 代码风格 的问题
  • eslint:代码检查工具,解决 代码质量 的问题
  • editorconfig:跨编辑器基本配置
  • huskygit 钩子工具
  • Lint-staged:在 git 暂存空间运行的 liters 工具,
  • eslint-plugin-prettier:让 eslint 使用 prettier 规则进行检查
  • eslint-config-prettier: 关闭所有不必要可能跟 prettier 产生冲突的规则
 
.prettierrc
{
  printWidth: 80, //单行长度
  tabWidth: 2, //缩进长度
  useTabs: false, //使用空格代替tab缩进
  semi: true, //句末使用分号
  singleQuote: true, //使用单引号
  quoteProps: 'as-needed', //仅在必需时为对象的key添加引号
  jsxSingleQuote: true, // jsx中使用单引号
  trailingComma: 'all', //多行时尽可能打印尾随逗号
  bracketSpacing: true, //在对象前后添加空格-eg: { foo: bar }
  jsxBracketSameLine: true, //多属性html标签的‘>’折行放置
  arrowParens: 'always', //单参数箭头函数参数周围使用圆括号-eg: (x) => x
  requirePragma: false, //无需顶部注释即可格式化
  insertPragma: false, //在已被preitter格式化的文件顶部加上标注
  proseWrap: 'preserve', //不知道怎么翻译
  htmlWhitespaceSensitivity: 'ignore', //对HTML全局空白不敏感
  vueIndentScriptAndStyle: false, //不对vue中的script及style标签缩进
  endOfLine: 'lf', //结束行形式
  embeddedLanguageFormatting: 'auto', //对引用代码进行格式化
}
 
.eslintrc
{
  "extends": ["airbnb", "plugin:prettier/recommended"], // eslint扩展规则
  "parser": "babel-eslint",// 向后兼容的解析器
  "parserOptions": {
    "ecmaVersion": 7, // 指定 ESMAScript 版本
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": { // eg如果不配置browser,window就会被eslint报undefined的错
    "es6": true,
    "browser": true,
    "node": true
  },
  "plugins": ["react", "jsx-a11y", "import"],
  "rules": {
		// off 或 0:关闭规则
		// warn 或 1:开启规则,warn 级别的错误 (不会导致程序退出)
		// error 或 2:开启规则,error级别的错误(当被触发的时候,程序会退出)
    "class-methods-use-this": 0,
    "import/no-named-as-default": 0,
    "react/jsx-filename-extension": [
      "error",
      {
        "extensions": [".js", ".jsx"]
      }
    ]
  }
}
 
husky 钩子 pre-commit 配置:
"husky": {
    "hooks": {
      "pre-commit": "lint-staged" // pre-commit,提交前的钩子
    }
  },
  "lint-staged": {
    // 此处可以配置文件夹和文件类型的范围
    "src/**/*.{jsx,tsx,ts,js,json,css,md}": [
      "prettier --write", // 先使用prettier进行格式化
      "eslint --fix", // 再使用eslint进行自动修复
      "git add" // 所有通过的话执行git
    ]
  },
 
 
 
prettier 在线配置:https://prettier.io/playground/
 
凹凸实验室规范:https://guide.aotu.io/index.html

© jianxiaoBai 2021 - 2022