eslint实现代码风格统一

2019-12-31 本文已影响0人萤火虫Flyer

一、编码规范

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/*

七、总结

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

eslint实现代码风格统一

一、编码规范

二、编码规范的优点

三、ESLint 介绍

四、js编码标准

五、具体的项目实践

1.配置eslint-loader

2.修改eslintrc.js

3.npm指令中添加lint指令

4. 运行项目修改报错

5. 添加git commit钩子

六、.eslintignore配置

七、总结

猜你喜欢

热点阅读

eslint实现代码风格统一

一、编码规范

二、编码规范的优点

三、ESLint 介绍

四、js编码标准

五、具体的项目实践

1.配置eslint-loader

2.修改eslintrc.js

3.npm指令中添加lint指令

4. 运行项目修改报错

5. 添加git commit钩子

六、.eslintignore配置

七、 总结

猜你喜欢

热点阅读

七、总结