前言

学习完模块规范，那么接下来就是很重要的代码规范了。在一个团队中，肯定会出现团队协作开发的场景，每个人的代码风格都不一样，如果没有统一的规范，当下一个人接手的时候，面对形形色色的代码风格，大概会风中凌乱吧。所以，本篇开始学习前端工程化中的代码规范

介绍

代码规范，就是用来约束团队成员的编码规范和风格的手段，有利于团队协作，减少一部分迷之问题。其有点如下：

强制规范团队编码规范和风格，可让新旧成员保持统一编码习惯，便于团队协作开发
增加代码的可维护性和可接入性，新成员能快速适应项目的架构和需求
保障项目整体质量，可减少无用代码、重复代码、错误代码和漏洞代码的几率（讲道理说，我还没遇到过因为编码规范的问题导致的这些bug，大部分还是自己写出来的）

接下来，由于自己是VScode的重度使用者，加上这边掘金小册也是使用的vscode，那就以这个编辑器来开始学习如何规范编码吧。

方案

代码规范一般是使用eslint，stylelint，tslint，prettier这些插件（vscode有这些插件，用于编辑器；在整体项目中，也有npm包供使用）。
lint，就是编辑器中运行的一个脚本进程，将代码转化为抽象语法树，遍历抽象语法树并通过预设的规则做一些判断和改动，再将新的抽象语法树转换为正确的代码。

Tslint官方已经废弃了tslint，使用eslint代替了；eslint的配置有一部分和prettier冲突，要想使用，还需要额外处理。

依赖安装

npm i -D eslint
npm i -D prettier
npm i -D eslint-plugin-prettier
npm i -D eslint-config-prettier // 处理eslint和prettier之间的冲突的

eslint配置

执行npx eslint --init或npm init @eslint/config执行eslint的初始化，按照步骤一步一步进行下去之后，会发现，原本的代码中出现了大量的报错，什么单双引号问题啦，结尾分号问题啦，结尾逗号问题啦等等，这是因为触发了eslint的检验规则了。
在.eslintrc.js文件中，rules属性下可以覆写新的规则去适配自己的代码风格，这些规则会覆盖默认的规则（以airbnb规则为例）

  rules: {
    quotes: [2, 'double'], //错误，必须双引号
    semi: [  //错误，必须有分号结尾
      2,
      'always',
      {
        omitLastInOneLineBlock: true,
      },
    ],
  },

rules属性下，便可以添加eslint的规则了。
同时，如果在出现问题是，自己手动去修改，是一件很麻烦的事情，所以，我们可以做在保存的时候自动修复（并不是所有的问题都能修复好，但是大部分情况下是很好用的。）这需要在vscode中setting.json文件中进行配置：

"editor.codeActionsOnSave": {
    "source.fixAll": true,
    "eslint.autoFixOnSave" : true,
  },

另外，有些文件我们不要用eslint去检验，如node_modules文件夹下的，此时，在根目录下创建一个.eslintignore来管理即可

.eslintrc.js
.prettierrc.js
babel.config.js
vetur.config.js
/node_modules/

prettier配置

prettier是可以对代码进行美化的，在.prettierrc.js文件中书写配置

module.exports = {
    // 常用配置相关解释
    printWidth: 100, // 超过最大值换行
    tabWidth: 4, // 缩进字节数
    useTabs: false, // 缩进不使用tab，使用空格
    semi: true, // 句尾添加分号
    singleQuote: true, // 使用单引号代替双引号
    proseWrap: "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
    arrowParens: "avoid", //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
    bracketSpacing: true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
    disableLanguages: ["vue"], // 不格式化vue文件，vue文件的格式化单独设置
    endOfLine: "auto", // 结尾是 \n \r \n\r auto
    eslintIntegration: false, //不让prettier使用eslint的代码格式进行校验
    htmlWhitespaceSensitivity: "ignore",
    ignorePath: ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
    jsxBracketSameLine: false, // 在jsx中把'>' 是否单独放一行
    jsxSingleQuote: false, // 在jsx中使用单引号代替双引号
    parser: "babylon", // 格式化的解析器，默认是babylon
    requireConfig: false, // Require a 'prettierconfig' to format prettier
    stylelintIntegration: false, //不让prettier使用stylelint的代码格式进行校验
    trailingComma: "es5", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
    tslintIntegration: false // 不让prettier使用tslint的代码格式进行校验
}

配置也需要在vscode的setting.json中加一点东西，具体就不列举了。

eslint和prettier的冲突

eslint和prettier插件之间存在着配置上的冲突，如果eslint和prettier针对同一规则指定了不同的处理，那就是冲突。使用eslint-plugin-prettier插件可以解决这个问题，修改eslint的配置：

// .eslintrc.js
module.exports = {
  env: {
    commonjs: true,
    es2021: true,
    node: true
  },
  extends: ['airbnb-base', 'prettier'], // 覆盖eslint格式配置,写在最后
  parserOptions: {
    ecmaVersion: 13
  },
  rules: {}
}

配置后,就解决了相互冲突的问题,现在格式的问题就由Prettier接手,但是我们还是想通过ESlint来自动保存,我们就要把Prettier的修复通过ESlint来体现, 就需要eslint-plugin-prettier配置

// 最终的.eslintrc.js
module.exports = {
  env: {
    commonjs: true,
    es2021: true,
    node: true
  },
  extends: ['airbnb-base', 'plugin:prettier/recommended'], // 覆盖eslint格式配置,写在最后
  parserOptions: {
    ecmaVersion: 13
  }
}

具体的配置，还是需要根据官网介绍来适配自己的项目。

参考资料

掘金小册：从0到1落地前端工程化

blog.csdn.net/weixin_4234…

前端工程化之代码规范

前言

介绍

方案

依赖安装

eslint配置

prettier配置

eslint和prettier的冲突

参考资料