stylelint配置过程

1. 安装本地依赖

cnpm i -D stylelint stylelint-config-stand

cnpm i -D stylelint-webpack-plugin

2. 通过npm命令运行

// package.json
{
    "scripts": {
        "lint:css": "stylelint **/*.{html,vue,css,sass,scss,less}"
    }
}

3. 以webpack插件运行

// vue.config.js
const StyleLintPlugin = require('stylelint-webpack-plugin');

module.exports = {
    ...
    configureWebpack: {
        plugins: [new StyleLintPlugin({
           files: ['**/*.{vue,htm,html,css,sss,less,scss,sass}'],
            fix: false, // 是否自动修复
            cache: true, // 是否缓存
            emitErrors: true, 
            failOnError: false,
        })],
    },

};

4. 忽略文件

在项目跟目录添加 .stylelintignore 文件，配置规则与 .gitignore 、.eslintignore 规则一样。

# .stylelintignore
# 旧的不需打包的样式库
*.min.css

# 其他类型文件
*.js
*.jpg
*.png
*.eot
*.ttf
*.woff
*.json

# 测试和打包目录
/test/
/dist/

5.stylelint 与 eslint 同时使用 git-hooks 配置

// package.json
{
    ...
    "lint-staged": {
        "*.{html,vue,css,sass,scss,less}": [
          "npm run lint:css"
        ]
    }，
    "gitHooks": {
        "pre-commit": "lint-staged"
    },
}

引自 使用stylelint规范vue项目