前言

前端代码规范的检查如果依靠人工的话太过耗时，也不太现实，所以我们制定ESlint+Prettier规则来约束前端代码。
ESlint负责语言层面的规范，Prettier负责样式相关。

ESlint

ESLint 是一个开源的 JavaScript 代码检查工具，由 Nicholas C. Zakas 于2013年6月创建。代码检查是一种静态的分析，常用于寻找有问题的模式或者代码，并且不依赖于具体的编码风格。对大多数编程语言来说都会有代码检查，一般来说编译程序会内置检查工具。
JavaScript 是一个动态的弱类型语言，在开发中比较容易出错。因为没有编译程序，为了寻找 JavaScript 代码错误通常需要在执行过程中不断调试。像 ESLint 这样的可以让程序员在编码的过程中发现问题而不是在执行的过程中。
ESLint 的初衷是为了让程序员可以创建自己的检测规则。ESLint 的所有规则都被设计成可插入的。ESLint 的默认规则与其他的插件并没有什么区别，规则本身和测试可以依赖于同样的模式。为了便于人们使用，ESLint 内置了一些规则，当然，你可以在使用过程中自定义规则。
ESLint 使用 Node.js 编写，这样既可以有一个快速的运行环境的同时也便于安装。

Prettier

Prettier是一个支持多种语言的代码格式化工具（Opinionated code formatter），根据自己的规则重新解析打印AST，使得整个代码库保持一致的代码样式（并不会影响AST），这些规则将最大行长考虑在内，并在必要时包装代码。

配置

eslint-config-alloy

我们使用的是腾讯 AlloyTeam 创立的一套 ESLint 规则eslint-config-alloy。

设计理念

样式相关的规则交给 Prettier 管理
传承 ESLint 的理念，帮助大家建立自己的规则
高度的自动化：先进的规则管理，测试即文档即网站
与时俱进，第一时间跟进最新的规则
开始配置

安装相关依赖。

npm install --save-dev eslint@7.17.0 babel-eslint@10.1.0 vue-eslint-parser@7.3.0 eslint-config-alloy@3 eslint-config-prettier@7.1.0 eslint-plugin-prettier@3.3.1 eslint-plugin-vue@7.4.1 vue-eslint-parser@7.3.0

依赖版本

"eslint": "7.17.0",
"babel-eslint": "10.1.0",
"eslint-config-alloy": "^3.10.0",
"eslint-config-prettier": "^7.1.0",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "7.4.1",
"vue-eslint-parser": "^7.3.0",

添加如下配置

module.exports = {
  //此项是用来告诉eslint找当前配置文件不能往父级查找
  root: true,
  parserOptions: {
    //此项是用来指定eslint解析器的，解析器必须符合规则，babel-eslint解析器是对babel解析器的包装使其与ESLint解析
    parser: 'babel-eslint',
  },
  //此项指定环境的全局变量，下面的配置指定为浏览器环境,启用除了 modules 以外的所有 ECMAScript 6 特性
  env: {
    browser: true,
    es6: true,
  },
  // 此项是用来提供插件的，插件名称省略了eslint-plugin-，下面这个配置是用来规范vue的
  plugins: ['vue'],
  extends: [
    // https://github.com/AlloyTeam/eslint-config-alloy
    'alloy/vue',
    // https://github.com/vuejs/eslint-plugin-vue
    'plugin:vue/essential',
    // 结合.prettierrc.js中的规则来检查代码！
    'plugin:prettier/recommended',
  ],
  globals: {
    // 你的全局变量（设置为 false 表示它不允许被重新赋值）
    //
    // myGlobal: false
  },
  rules: {
    // 自定义你的规则
    // 让prettier找出代码中的格式问题
    'prettier/prettier': 'error',
    // complexity:'40',
    complexity: ['error', 40],
    'vue/component-tags-order': [
      'error',
      {
        order: [['template', 'script'], 'style'],
      },
    ],
    /**
     * 禁止出现重复的属性
     */
    'vue/no-duplicate-attributes': [
      'error',
      {
        allowCoexistClass: true,
        allowCoexistStyle: true,
      },
    ],
  },
};

根目录下新建.prettierrc.js文件

添加如下配置

// .prettierrc.js
module.exports = {
  // 一行最多 120 字符
  printWidth: 120,
  // 使用 2 个空格缩进
  tabWidth: 2,
  // 不使用缩进符，而使用空格
  useTabs: false,
  // 行尾需要有分号
  semi: true,
  // 使用单引号
  singleQuote: true,
  // 对象的 key 仅在必要时用引号
  quoteProps: 'as-needed',
  // jsx 不使用单引号，而使用双引号
  jsxSingleQuote: false,
  // 末尾需要有逗号
  trailingComma: 'all',
  // 大括号内的首尾需要空格
  bracketSpacing: true,
  // jsx 标签的反尖括号需要换行
  jsxBracketSameLine: false,
  // 箭头函数，只有一个参数的时候，也需要括号
  arrowParens: 'always',
  // 每个文件格式化的范围是文件的全部内容
  rangeStart: 0,
  rangeEnd: Infinity,
  // 不需要写文件开头的 @prettier
  requirePragma: false,
  // 不需要自动在文件开头插入 @prettier
  insertPragma: false,
  // 使用默认的折行标准
  proseWrap: 'preserve',
  // 根据显示样式决定 html 要不要折行
  htmlWhitespaceSensitivity: 'css',
  // vue 文件中的 script 和 style 内不用缩进
  vueIndentScriptAndStyle: false,
  // 换行符使用 lf
  endOfLine: 'lf',
  // 格式化嵌入的内容
  embeddedLanguageFormatting: 'auto',
};

开发工具适配

VS code

安装ESlint，Prettier插件。

如果不能识别vue文件，需要在「文件 => 首选项 => 设置」里做如下配置：

{
  "eslint.validate": [
    "javascript",
    "vue",
    "typescript"
  ]
}

保存自动修复功能大家根据自身情况设置。

结语

一套规范的建立与实施离不开大家的共同努力，一开始可能会经历阵痛，但相信遵守规范能让我们获益无穷。

附录

详细规则见：https://github.com/AlloyTeam/eslint-config-alloy/blob/master/vue.js

编码规范

ESlint Prettier

前言

ESlint

Prettier

配置

eslint-config-alloy

设计理念

开始配置

开发工具适配

结语

附录