eslint实现代码风格统一

一、编码规范

• Style Guide，编码规范又称编码风格，一个团队中，每个人都有自己的一套编码风格，在协作中找到一个平衡点，来约束大家进行友好、规范的编码，可以理解为团队的编码规范或编码风格

二、编码规范的优点

• 提高可读性
• 统一全局，促进团队协作
• 有助于知识传递，加快工作交接
• 减少名字增生，降低维护成本
• 强调变量之间的关系，降低缺陷引人的机会
• 提高程序员的个人能力

三、ESLint 介绍

• ESLint是一个JavaScript代码静态检查工具，可以检查JavaScript的语法错误，提示潜在的bug，可以有效提高代码质量，维持前端团队高度一致的编码风格。
  ESLint不但提供一些默认的规则，也提供用户自定义规则来约束所写的JavaScript代码。
• ESLint 使用简介

四、js编码标准

• 标准是规范性文件之一。其定义是为了在一定的范围内获得最佳秩序，经协商一致制定并由公认机构批准，共同使用的和重复使用的一种规范性文件。
• 常见的编码标准
  • eslint:recommended
  • plugin:vue/essential
  • standard
  • @vue/standard

五、具体的项目实践

• 1.配置eslint-loader

  • 在webpack中的配置

      {
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          enforce: 'pre',
          include: [resolve('src'), resolve('test')],
          options: {
            // 启用自动修复
            fix: true,
            // 启用警告信息
            emitWarning: true
          }
        },
    

  • 在vue.config.js中的配置

    config.module
      .rule('eslint')
      .use('eslint-loader')
      .loader('eslint-loader')
      .tap(options => {
        options.fix = true
        options.emitWarning = true
        return options
      })
    

    • 在nuxt中配置extend下配置

        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/,
          options: {
            // 启用自动修复
            fix: true,
            // 启用警告信息
            emitWarning: true
          }
        })
    

  • 通过以上的代码配置，可以使项目中大部分简单的eslint报错得到自动的修复，但是可能出现不能修复的情况，这种情况一般是eslint未升级的原因，对eslint相应module做升级即可

• 2.修改eslintrc.js

      // http://eslint.org/docs/user-guide/configuring
      module.exports = {
          root: true,
          env: {
              browser: true,
          },
          // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
          'extends': [
              'plugin:vue/essential',
              'standard'
          ],
          globals: {
              "apiData": true,
              "touch": true,
              "watermark": true,
              "Swiper":true,
              "SiriWave":true,
              "wx":true,
              "echarts":true
          },
          rules: {
              'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',//非开发环境下禁止使用console
              'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',//非开发环境下禁止使用debugger
              'no-alert': process.env.NODE_ENV === 'production' ? 'error' : 'off',//非开发环境下禁止使用alert
              "no-unused-vars": 0,// 不能有声明后未被使用的变量或参数
              "no-tabs": 0,// 禁止使用tabs
              "no-useless-escape": 0,
              "no-empty": 1,// 块语句中的内容不能为空
              "no-var": 1,//使用let和const代替var
              "properties": 0,
              "camelcase": 0,//强制驼峰命名规则
              "block-spacing": ["error", "always"],
              "brace-style": ["error", "1tbs", { "allowSingleLine": true }],
              "comma-spacing": ["error", { "before": false, "after": true }],
              "space-in-parens": ["error", "never"],
              "no-multi-spaces": "error",// 不能用多余的空格
              "no-mixed-spaces-and-tabs": 0,//不允许混用tab和空格
              "no-useless-return": 0,
              "space-before-function-paren": ["error", "always"],// 函数定义时括号前面要不要有空格
              "vue/no-parsing-error": [2, { "x-invalid-end-tag": false }],
              "vue/html-self-closing":0,
              "vue/no-use-v-if-with-v-for": 0,
              "operator-linebreak": ["error", "after", { "overrides": { "?": "before", ":": "before" } }],
              'key-spacing': ["error", { "beforeColon": false }]//对象字面量中冒号的前后空格
          },
          parserOptions: {
              parser: 'babel-eslint',
              ecmaFeatures: {
                'legacyDecorators': true
              }
          }
      }
      
      ```
      
  

• 其中extends下的plugin:vue/essential标准主要是针对vue中html代码做的规范限制

• extends下standard标准主要是针对vue中js代码做的规范限制
• 安装以上extends需要的依赖有

  npm install babel-eslint eslint eslint-config-standard eslint-friendly-formatter eslint-loader eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard eslint-plugin-vue --save-dev
  

• 3.npm指令中添加lint指令

  • 在vue-cli项目中对应的lint指令："lint": "vue-cli-service lint",
  • 在webpack普通项目中对应的lint指令："lint": "eslint --ext .js,.vue src"

• 4. 运行项目修改报错

  • 当我们配置好eslint之后，运行项目时，eslint-loader已经帮助我们进行了大量的代码fix，但是对于一些逻辑性或者严谨性的代码，eslint-loader是不能修改的，比如’===‘或者vue的v-for循环中缺少key等报错，所以这时候需要我们手动挨个的取修改，问题应该也不会很多
  • 常见的问题
    • v-for循环中没有给key属性
    • html代码格式有问题，这时候建议把相应的html代码片段粘贴出来，在线格式化一下，再复制进去
    • 变量定义未使用
    • try catch final中某一个代码块没写代码
    • switch中没有default
    • computed中return值不完整
    • ===没有使用
    • ...

• 5. 添加git commit钩子

  • 关于钩子的讲解不在赘述，简单的可以理解为：在某一条件或某一生命周期中的触发。具体细节可以通过文章进行了解：钩子函数 ,理解JavaScript中的钩子函数
  • git在各种操作中同样提供了相应的钩子，具体细节参考这篇文章自定义git钩子，Git 钩子 hook 介绍与使用
  • 以上两段文字主要是对git钩子做的理论上的介绍，当然对于我们日常的coding来讲，进行各种钩子的配置还是相对繁琐的，很庆幸，强大的node_module平台为我们提供了这种方便的依赖，具体参考这篇文章git commit前检测husky与pre-commit，同样的push钩子同理，相应的文档：pre-push
  • 具体的项目实践：npm install pre-commit --save-dev，然后再package.json中添加,

   "pre-commit": [
      "lint"
    ]
  

  • 其中lint指令为我们上文所添加，当执行代码commit时，如果项目中存在代码轻度的不规范，这时，eslint-loader会主动为我们fix,如果出现比较严重的问题，会直接commit报错，阻止代码进入仓库

六、.eslintignore配置

• 在项目中有些文件我们并不希望纳入eslint的修改范围，可以在跟目录下创建.eslintignore文件，相应的内容
  • 如：要忽略某一个文件/src/assets/fonts/iconfont/iconfont.js
  • 如：要忽略某一个文件下的所有文件/src/components/mint-ui/swipe/*

七、 总结

• 代码规范（代码风格）没有严格意义上的对错之分，就如现实生活中，我们每个人都有自己的穿着打扮一样。可能有些人打扮土一点，但土就土，并不影响什么。同时也没有严格意义的孰优孰劣，社会中的规范，是为了维护基本秩序和道德底线。编码规范，则是为了避免错误。使得大家在开发中提高规范意识和规范能力