lint规范怎么做

1,126 阅读4分钟

lint规范

一般来说,对于大多数人来说,说起lint规范,大家只能说eslint,知道它是校验我们的代码的!

但是,如何在团队中,使用比较好的eslint规范?eslint的规则那么多,我们如何简单有效的配置属于我们团队的eslint规范?那些一个个的规则,都要我们一个个的去配置不成?

当然,社区中,肯定有一些成熟的eslint规范:Standard规范、Airbnb规范!(这两种规范,也是我们vue-cli脚手架中提供的规范)

lint规范的另一个方面,是stylelint的校验,也就是对于我们写的css、less、scss的样式代码进行校验。

那么为什么要进行stylelint的校验?要从两个方面来考虑这个问题:

1、从浏览器对DOM解析机制上来说,肯定先是解析DOM的布局,比如宽高(width、height)、位置(position)等等,然后再解析颜色等等。

从代码的编写层面,width、height这一类的属性,肯定要放在background-color之类的样式的前面,而stylelint,就是解决这个问题的!

2、从编写代码的角度,有时候我们就会写错一些样式,比如我们一个css中,写了两个font-size属性,如果没有stylelint,那么是不会被暴露出来!

还有那些问题呢?

1、强制改变别人的编码习惯,是非常不人性的!比如我写一个css,我怎么知道哪个样式写在前面?所以我们需要一些工具的支持!

比如:某些编辑器,我能够一键保存,就能根据配置的eslint、stylelint,直接修复相关代码!

比如:我们在git提交的时候,能不能通过githooks,提前做一些代码的修复和校验!

2、人的问题

团队内部,接受一个新的东西,是需要一定的成本的,特别是那些对lint不了解的团队成员,会天生抵触这样的东西!

首先,我们得相信一个程序员的自我修养,每个人都向往美好的东西。

其次,为了让他人接受的成本更低,可以做一些这方面的分享,收集一些大家的意见等等。

3、老代码的问题

lint规则,接入老的仓库,会导致老的仓库的代码校验问题,一般而言,如果代码不发生改变,不需要处理。

一旦发生了改变,那lint规则就会在git提交,或者在自动保存的时候,校验这样的规则。

所以,针对老代码,也需要我们花费一些精力来处理问题。

eslint

针对vue而言,我的一个规范长下面这个样子

.eslint.js 文件配置:

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
}

相比而言,有些文件,我们不希望,使用这样的校验规则,所以需要配置 .eslintignore 文件

.eslintignore 文件配置:

/build/
/config/
dist
test
node_modules/
static
.*
**/*.min.*
**/*.css
**/*.scss
**/*.less
**/*.sass
**/*.woff
**/*.woff2
**/*.txt
**/*.ttf
**/*.otf
**/*.eot
**/*.font
**/*.svg
**/*.png
**/*.jpg
**/*.jpeg
**/*.PNG
**/*.JPG
**/*.JPEG
**/*.md
**/*.tpl

stylelint

stylelint配置文件叫:stylelint.config.js

stylelint.config.js

module.exports = {
  extends: [
    'stylelint-config-standard',
    // 度样式属性进行排序格式化
    'stylelint-config-rational-order',
  ],
  plugins: [
    'stylelint-order',
    'stylelint-config-rational-order/plugin',
  ],
  rules: {
    'at-rule-no-unknown': [true, {
      ignoreAtRules: [
        'mixin', 'extend', 'content',
      ],
    }],
    'selector-pseudo-element-no-unknown': [true, {
      ignorePseudoElements: ['v-deep'],
    }],
    'selector-max-id': null,
  },
  // 这里在迁移之前, 会把有sass的文件的忽略掉(每个项目配置不一样)
  ignoreFiles: [
    'src/App.vue',
    'node_modules/',
    'lib',
    'dist',
    '.git/',
    'test',
    '**/*.sass',
    '**/*.png',
    '**/*.jpg',
    '**/*.jpeg',
    '**/*.PNG',
    '**/*.JPG',
    '**/*.JPEG',
    '**/*.svg',
    '**/*.eot',
    '**/*.svg',
    '**/*.ttf',
    '**/*.woff',
    '**/*.woff2',
    '**/*.otf',
    '**/*.txt',
    '**/*.js',
    '**/*.json',
    '**/*.font',
    '**/*.md',
    '**/*.min.*',
    '.*'],
};

stylelint如何使用,在百度中,有很多教程,大家可以去搜一搜。

编辑器支持

1、vscode编辑器配置(个人推荐使用vscode)

vscode是对于lint规则,支持最好的编辑器。

不过需要安装一些插件:ESLint、stylelint、这两个插件是必须配置的(如果想得到自动保存自动修复功能的话)

还有其他的一些插件:Chinese(汉化包)、markdownlint、npm、Sass、Sass Lint、Vetur等等。。

setting.json是关于vscode配置的一个json文件,我的配置如下,供大家参考:(vscode中的setting.json不知道是什么的话,可以自行百度,说明的人很多)

{
    "editor.fontSize": 14,
    "eslint.format.enable": true,
    "eslint.validate": ["javascript", "javascriptreact",
        {
        "language": "html",
             "autoFix": true
        },{
        "language": "vue",
             "autoFix": true
        }
    ],
    "css.validate": false,
    "less.validate": false,
    "scss.validate": false,
    "editor.codeActionsOnSave": {
        "source.fixAll": true,
        "source.fixAll.eslint": true,
        "source.fixAll.stylelint": true
    },
    "[json]": {
        "editor.defaultFormatter": "vscode.json-language-features"
    }
}

2、webstorm配置

webstorm编辑器,内部的performance设置中,可以针对eslint规则,进行设置。

一般而言,webstorm会自动读取项目中的eslint.js配置项。

package.json 配置git钩子校验

  "gitHooks": {
    "pre-commit": "lint-staged",
    "commit-msg": "commitlint -e $GIT_PARAMS"
  },
  "lint-staged": {
    "*.{js,jsx,vue}": [
      "eslint --fix",
      "stylelint --fix",
      "git add ."
    ],
    "*.{css,less,scss}":[
      "stylelint --fix",
      "git add"
    ]
  }

其中的核心代码,是gitHooks中的pre-commit,执行了lint-staged,而lint-staged,执行了内部配置的规则!

如果项目中不生效,可以使用ghooks、或者husky的方式,进行集成。(原因就是gihHooks是vue脚手架的功能,和脚手架的版本相关)

针对这些,可以给大家一个参考项目,本项目是个人准备的一个vue版本的仓库模板:github.com/mapbar-fron…