stylelint-config-moresec
stylelint-config rules for MoresecFE
包含 stylelint stylelint-webpack-plugin
Installation
npm
npm install stylelint-config-moresec --save-dev
yarn
yarn add stylelint-config-moresec --save-dev
Usage
本地安装配置: 1、在项目根目录新建 .stylelintrc.js 文件
module.exports = {
processors: [],
plugins: [],
extends: ["stylelint-config-moresec"],
rules: {
// 这里自定义规则
// 可参考官方:https://stylelint.docschina.org/user-guide/rules/
}
}
2、webpack配置
webpack.dev.conf.js
const StyleLintPlugin = require('stylelint-webpack-plugin')
plugins中添加
new StyleLintPlugin({
context: 'src',
configFile: path.resolve(__dirname,'../.stylelintrc.js'),
// 正则匹配想要lint监测的文件
files: ['src/**/**/**/*.less', 'src/assets/css/*.l?(e|c)ss'],
fix: true
}),
vue-cli3
#需添加新插件
npm install @ascendancyy/vue-cli-plugin-stylelint --save-dev
在vue.config.js配置
pluginOptions: {
lintStyleOnBuild: true, // 添加了插件(@ascendancyy/vue-cli-plugin-stylelint), 所以需要配置
stylelint: {
fix: true, // boolean (default: true)
files: ['src/**/*.vue', 'src/assets/styles/*.l?(e|c)ss'] // string | [string] (default: ['src/**/*.{vue,htm,html,css,sss,less,scss}'])
// formatter: () => { } // function (default: require('stylelint-codeframe-formatter'))
// etc...
}
}
忽略检查文件 .stylelintignore
根据自己项目设置忽略检测文件, 比如
src/assets/css/*.css
Extending the config
在.stylelintrc.js文件,重新配置规则rules
,将覆盖和添加原有规则:
{
"extends": "stylelint-config-moresec",
"rules": {
"at-rule-no-unknown": [ true, {
"ignoreAtRules": [
"extends",
"ignores"
]
}],
"indentation": "tab",
"number-leading-zero": null,
"unit-whitelist": ["em", "rem", "s"]
}
}
vscode settings.json配置
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
{
"language": "vue",
"autoFix": true
},
{
"language": "typescript",
"autoFix": true
},
{
"language": "typescriptreact",
"autoFix": true
}
],
"vetur.validation.template": false, // 如果使用Vetur
运行
stylelint +文件名(在当前项目所在位置的相对路径名)
stylelint src/**/**/**/*.less
自动修复
stylelint --fix +文件名(在当前项目所在位置的相对路径名)
stylelint --fix src/**/**/**/*.less
Suggested additions
stylelint-config-moresec
, 你可以扩展它来创建一个定制的和更严格的配置: