lint代码风格工具整理

1.lint-stage+husky

npm install --save-dev lint-staged husky

配置：可在.huskyrc.js  或者package.json

https://www.npmjs.com/package/husky

"husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,jsx}": [
      "prettier --write",
      "eslint --fix",
      "git add"
    ],
    "*.{html,vue,css,sass,scss}": [
      "stylelint --fix",
      "git add"
    ]
  },

lint-staged是一个可以提供运行脚本校验文件的插件平台；可以根据不同文件执行不同的命令(Lint-staged，一个仅仅过滤出Git代码暂存区文件(被committed的文件)的工具,并不像eslint那样需要配置忽略配置

；配置内的文件全量遍历检查)

https://github.com/okonet/lint-staged#readme

执行命令若有需要用到环境变量；用cross-env插件添加

Use environment variables with linting commands
Linting commands do not support the shell convention of expanding environment variables. To enable the convention yourself, use a tool like cross-env.

For example, here is jest running on all .js files with the NODE_ENV variable being set to "test":

{
  "*.js": ["cross-env NODE_ENV=test jest --bail --findRelatedTests"]
}

lint-staged使用style-lint

Stylelint for CSS with defaults and for SCSS with SCSS syntax
{
  "*.css": "stylelint",
  "*.scss": "stylelint --syntax=scss"
}
Run PostCSS sorting and Stylelint to check
{
  "*.scss": ["postcss --config path/to/your/config --replace", "stylelint"]
}

 

2.eslint:  extends(standard airbnb)

vscode可以安装eslint插件+prettier插件，并配置好vscode  settings.json  :https://www.cnblogs.com/little-ab/articles/9521771.html

eslint:recommended这个是默认规则，https://eslint.org/docs/rules/ 上可以查recommended的有什么规则

例如debugger默认是不允许的

 

 

参考：https://www.cnblogs.com/jiaoshou/p/12250278.html  lint-staged

 

3.stylelint

https://stylelint.io/user-guide/get-started

https://github.com/hudochenkov/stylelint-order

参考：https://www.cnblogs.com/jiaoshou/p/11284204.html

react版本配置参考：https://www.cnblogs.com/xiaohuochai/p/9078154.html

规则翻译：https://blog.csdn.net/sinat_31511831/article/details/54377837?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-18.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-18.nonecase

vscode可以安装style lint plus插件，插件会读取配置本地配置表

//vscode  setting.json
 "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true,
      "source.fixAll.stylelint": true,
    },
    "css.validate": false,
    "less.validate": false,
    "scss.validate": false,
    "stylelint.enable": true,
    "stylelint.autoFixOnSave": true,

npm install -D -save-dev stylelint stylelint-config-standard

//stylelint是运行工具，stylelint-config-standard是stylelint的推荐配置，

npm i --save-dev stylelint-order css-properties-sorting

//stylelint-order是CSS属性排序插件(默认先写定位，再写盒模型，再写内容区样式，最后写 CSS3 相关属性)。
//css-properties-sorting（自动修复排序，若安装此插件，需删除processors: ["stylelint-processor-html"]）

 

.stylelintrc或者 .stylelintrc.js

"processors": ["@mapbox/stylelint-processor-arbitrary-tags"], //该插件用于解析vue单文件里的css
  "plugins": [
    "stylelint-order",
    "stylelint-scss"
    ],
  "extends": ["stylelint-config-standard","css-properties-sorting"],
  "rules": {
　　//"order/order": [ "declarations", "custom-properties", "dollar-variables", "rules", "at-rules" ] 
    "order/order": [
      "custom-properties",
      "declarations"
    ],
　　//"order/properties-order":["position","top",...]
    "color-no-invalid-hex": true,
    "unit-no-unknown": true,
    "property-no-unknown": true,
    "selector-pseudo-class-no-unknown": true,
    "selector-pseudo-element-no-unknown": true,
    "comment-no-empty": true,
    "number-leading-zero": "always",
    "number-no-trailing-zeros": true,
    "declaration-colon-space-after": "always",
    "declaration-colon-space-before": "never",
　　 "indentation": 2,
　　 "media-feature-name-no-vendor-prefix": true,
　　 "at-rule-no-vendor-prefix": true, 
　　 "selector-no-vendor-prefix": true, 
　　 "property-no-vendor-prefix": true, 
　　 "value-no-vendor-prefix": true,
　　 "max-nesting-depth": 3
  }
}

// .stylelintignore
# 旧的不需打包的样式库 
*.min.css 
# 其他类型文件 
*.js 
*.jpg 
*.woff 
# 测试和打包目录 
/test/ 
/dist/ 
# 通过反取忽略目录 
/src/component/* 
!/src/component/CompA 
!/src/component/CompB 
# 这样的效果是除 CompA 和 CompB 外其他目录都会被忽略

 

//.stylelintrc.js  还可以配置property order
//https://github.com/hudochenkov/stylelint-order/blob/master/rules/properties-order/README.md
//分块排序 块之间还可以加空格
"order/properties-order": [ // 指定声明块内属性的字母顺序
      'position',
      'top',
      'right',
      'bottom',
      'left',
      'z-index',
      'display',
      'float',
      'width',
      'height',
      'max-width',
      'max-height',
      'min-width',
      'min-height',
      'padding',
      'padding-top',
      'padding-right',
      'padding-bottom',
      'padding-left',
      'margin',
      'margin-top',
      'margin-right',
      'margin-bottom',
      'margin-left',
      'margin-collapse',
      'margin-top-collapse',
      'margin-right-collapse',
      'margin-bottom-collapse',
      'margin-left-collapse',
      'overflow',
      'overflow-x',
      'overflow-y',
      'clip',
      'clear',
      'font',
      'font-family',
      'font-size',
      'font-smoothing',
      'osx-font-smoothing',
      'font-style',
      'font-weight',
      'hyphens',
      'src',
      'line-height',
      'letter-spacing',
      'word-spacing',
      'color',
      'text-align',
      'text-decoration',
      'text-indent',
      'text-overflow',
      'text-rendering',
      'text-size-adjust',
      'text-shadow',
      'text-transform',
      'word-break',
      'word-wrap',
      'white-space',
      'vertical-align',
      'list-style',
      'list-style-type',
      'list-style-position',
      'list-style-image',
      'pointer-events',
      'cursor',
      'background',
      'background-attachment',
      'background-color',
      'background-image',
      'background-position',
      'background-repeat',
      'background-size',
      'border',
      'border-collapse',
      'border-top',
      'border-right',
      'border-bottom',
      'border-left',
      'border-color',
      'border-image',
      'border-top-color',
      'border-right-color',
      'border-bottom-color',
      'border-left-color',
      'border-spacing',
      'border-style',
      'border-top-style',
      'border-right-style',
      'border-bottom-style',
      'border-left-style',
      'border-width',
      'border-top-width',
      'border-right-width',
      'border-bottom-width',
      'border-left-width',
      'border-radius',
      'border-top-right-radius',
      'border-bottom-right-radius',
      'border-bottom-left-radius',
      'border-top-left-radius',
      'border-radius-topright',
      'border-radius-bottomright',
      'border-radius-bottomleft',
      'border-radius-topleft',
      'content',
      'quotes',
      'outline',
      'outline-offset',
      'opacity',
      'filter',
      'visibility',
      'size',
      'zoom',
      'transform',
      'box-align',
      'box-flex',
      'box-orient',
      'box-pack',
      'box-shadow',
      'box-sizing',
      'table-layout',
      'animation',
      'animation-delay',
      'animation-duration',
      'animation-iteration-count',
      'animation-name',
      'animation-play-state',
      'animation-timing-function',
      'animation-fill-mode',
      'transition',
      'transition-delay',
      'transition-duration',
      'transition-property',
      'transition-timing-function',
      'background-clip',
      'backface-visibility',
      'resize',
      'appearance',
      'user-select',
      'interpolation-mode',
      'direction',
      'marks',
      'page',
      'set-link-source',
      'unicode-bidi',
      'speak'
    ]

 

// webpack.conf.js
const StyleLintPlugin = require('stylelint-webpack-plugin');
 
module.exports = {
    ...
    'plugins': [
        ...
        new StyleLintPlugin({
            'files': ['**/*.{html,vue,css,sass,scss}'],
            'fix': false,
            'cache': true,
            'emitErrors': true,
            'failOnError': false
        })
    ]

 

4.commitlint &commitizen 

https://github.com/commitizen/cz-cli

参考：https://www.cnblogs.com/jiaoshou/p/11190619.html

VSCode可以用 vscode-commitizen ,Open the command panel (ctrl+shift+p or command+shift+p) and type 'conventional commit'.

安装命令如下。

npm install --save-dev commitizen

初始化项目以使用cz-conventional-changelog适配器

npx commitizen init cz-conventional-changelog --save-dev --save-exact

安装完可以在script添加命令或者：npx git-cz

/**
 * feat：新增功能
 * fix：bug 修复
 * docs：文档更新
 * style：不影响程序逻辑的代码修改(修改空白字符，格式缩进，补全缺失的分号等，没有改变代码逻辑)
 * refactor：重构代码(既没有新增功能，也没有修复 bug)
 * perf：性能, 体验优化
 * test：新增测试用例或是更新现有测试
 * build：主要目的是修改项目构建系统(例如 glup，webpack，rollup 的配置等)的提交
 * ci：主要目的是修改项目继续集成流程(例如 Travis，Jenkins，GitLab CI，Circle等)的提交
 * chore：不属于以上类型的其他类型，比如构建流程, 依赖管理
 * revert：回滚某个更早之前的提交
*/

强制使用commitizen

https://www.cnblogs.com/jiaoshou/p/11190619.html

https://segmentfault.com/a/1190000016503661

Husky
For husky users, add the following configuration to the project's package.json:

"husky": {
  "hooks": {
    "prepare-commit-msg": "exec < /dev/tty && git cz --hook || true",  //限制不给直接用commit
　　 "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"  //commitlint检测  git commit -m '测试提交'时将触发commit-msg事件钩子
  }
}

使用commitlint校验(结合使用commitizen,husky)

npm install --save-dev @commitlint/cli @commitlint/config-conventional

commitlint.config.js，当然也可以是 .commitlintrc.js里配置

module.exports = { extends: ['@commitlint/config-conventional'] };


module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [2, 'always', [
      "feat", "fix", "docs", "style", "refactor", "test", "chore", "revert"
    ]],
    'subject-full-stop': [0, 'never'],
    'subject-case': [0, 'never']
  }
};

https://commitlint.js.org/#/

rule由name和配置数组组成，如： name:[0, 'always', 72] ，数组中第一位为 level ，可选 0,1,2 ，0为禁用规则，1为警告，2为错误，

第二位为应用与否，可选 always|never ，第三位该rule的值。 上面我们就完成了commitlint的安装与提交规范的制定。
检验commit message的最佳方式是结合git hook，所以需要配合Husky。

　　 'type-case': [0],
    'type-empty': [0],
    'scope-empty': [0],
    'scope-case': [0],
    'subject-full-stop': [0, 'never'],
    'subject-case': [0, 'never'],
    'header-max-length': [0, 'always', 72]

 

5.conventional-changelog-cli

 

//安装
npm install -g conventional-changelog-cli

//-p angular用来指定使用的commit message 
conventional-changelog -p angular -i CHANGELOG.md -s

//使用atom的commit message 
conventional-changelog -p atom -i CHANGELOG.md -s


参数-i CHANGELOG.md表示从 CHANGELOG.md 读取 changelog, -s 表示读写 changelog 为同一文件。
需要注意的是，上面这条命令产生的 changelog 是基于上次 tag 版本之后的变更（Feature、Fix、Breaking Changes等等）所产生的，
所以如果你想生成之前所有 commit 信息产生的 changelog 则需要使用这条命令：

$ conventional-changelog -p angular -i CHANGELOG.md -s -r 0
其中 -r 表示生成 changelog 所需要使用的 release 版本数量，默认为1，全部则是0。

 

{
  "scripts": {
    "version": "conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md"
  }
}

 6.standard-version

https://github.com/conventional-changelog/standard-version

https://www.cnblogs.com/zivxiaowei/p/10089201.html

standard-version will then do the following:

1. Retrieve the current version of your repository by looking at bumpFiles[1], falling back to the last git tag.
2. bump the version in bumpFiles[1] based on your commits.
3. Generates a changelog based on your commits (uses conventional-changelog under the hood).
4. Creates a new commit including your bumpFiles[1] and updated CHANGELOG.
5. Creates a new tag with the new version number.

npm install -g standard-version
或者
npm install --save-dev standard-version

//1. git pull origin master
//2. 根据 pacakage.json 中的 version 更新版本号，更新 changelog
//3. git add -A, 然后 git commit
//4. git tag 打版本操作
//5. push 版本 tag 和 master 分支到仓库
//其中2，3，4则是 standard-version 工具会自动完成的工作

npm run release -- --first-release  第一次发布

--release-as, -r 指定版本号

//默认情况下，工具会自动根据 主版本（major）,次版本（ minor） or 修订版（patch） 规则生成版本号，
例如如果你package.json 中的version 为 1.0.0, 那么执行后版本号则是：1.0.1。

// standard-version -r minor
// output 1.1.0
// standard-version -r 2.0.0
// output 2.0.0
// standard-version -r 2.0.0-test
// output 2.0.0-test

--prerelease, -p 预发版本命名
// standard-version --prerelease alpha
// output 2.0.0-alpha.0

--tag-prefix, -t 版本 tag 前缀
// standard-version --tag-prefix "stable-"
// output tag: stable-v2.0.0

//集成 npm
"scripts": {
    "release": "./scripts/release.sh",
    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0 && git add CHANGELOG.md && npm run changeissueurl",
    "changeissueurl": "replace 'https://github.com/myproject/issues/' 'https://redmine.example.com/' CHANGELOG.md"
  },

//release.sh 

#!/bin/bash

# Release branch
master="master"
prefix="DTinsight_v"

git pull origin $master
echo "Current pull origin $master."

# Auto generate version number and tag
standard-version -r $release --tag-prefix $prefix

git push --follow-tags origin $master

echo "Git push origin $master"
echo "Release finished."

 

//https://github.com/conventional-changelog/standard-version#lifecycle-scripts
//

//Lifecycle Scripts

{
  "standard-version": {
    "scripts": {
      "prebump": "echo 9.9.9"
    }
  }
}

 

总体参考：https://segmentfault.com/a/1190000017797243