前言
在学习stylelint之前我们需要知道什么是stylelint，以及它解决了什么问题。
如果你已经知道eslint，那么可能看名字你可能就已经猜到了，没错，就像eslint是javascript的语法检查工具一样，stylelint是css的语法检查工具。
下面是官网的解释：
A mighty, modern CSS linter and fixer that helps you avoid errors and enforce consistent conventions in your stylesheets.
一款强大的，时髦的css语法检查和纠错工具，它可以帮助开发者在编写样式文件时避免错误，同时它还可以强迫开发者们形成统一的开发规范。
通过stylelint的使用，可以帮助团队内的小伙伴形成统一的，规范的代码风格，从而降低代码的维护成本。
So，跟着小姐姐一起来学习stylelint吧，高能提示，以下纯干货哦～
文件目录
首先是文件目录，build用来放项目打包相关代码，src是我们的工作目录。
package.json
build
webpack.config.js
stylelint.config.js
src
index.html
index.js
index.less
package.json
接下来是package.json，除了依赖我们还定义了一个dev脚本，用来查看样式的效果。
{
"name": "stylelintStudy",
"version": "1.0.0",
"scripts": {
"dev": "./node_modules/.bin/webpack-dev-server --config ./build/webpack.config.js"
},
"devDependencies": {
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^2.1.2",
"html-webpack-plugin": "^2.30.1",
"less": "^2.7.3",
"less-loader": "^4.0.5",
"path": "^0.12.7",
"style-loader": "^0.19.0",
"stylelint": "^8.2.0",
"stylelint-webpack-plugin": "^0.9.0",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.3"
}
}
webpack.config.js
接下来是webpack的配置文件，插件stylelint-webpack-plugin的配置项接下来会有详细的介绍。
const path = require('path');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, '../dist'),
filename: 'index.js'
},
module: {
rules: [{
test: /\.less$/,
use: ExtractTextWebpackPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'less-loader']
})
}]
},
plugins: [
new ExtractTextWebpackPlugin('index.css'),
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'src/index.html'
}),
new StyleLintPlugin({
context: "src",
configFile: path.resolve(__dirname, './stylelint.config.js'),
files: '**/*.less',
failOnError: false,
quiet: true,
syntax: 'less'
})
]
};
stylelint.config.js
我们先写一个规则做测试，"color-no-invalid-hex": true表示必须使用合法的颜色值。
module.exports = {
"rules": {
"color-no-invalid-hex": true
}
};
测试文件
index.html
<!DOCTYPE html>
<html>
<head>
<title>Stylelint</title>
</head>
<body>
<div>这是一个学习stylelint的测试页面</div>
</body>
</html>
index.js
import './index.less';
index.less
@base:46.875rem;
html, body {
height: 100%;
background: #f6f6f6;
}
body {
font-size: 46.875px;
}
div {
margin-top: 2rem;
text-align: center;
font-size: 100/@base;
}
开始运行
这些准备工作好了之后，打开终端，进入文件目录，执行：
npm install
npm run dev
默认端口是8080，8080被占用的情况下会使用其他端口，不管是哪个，终端里面都会有提示，类似于这样：
打开http://localhost:8080，查看页面效果：
测试
正常运行后，我们可以修改一下less文件的内容来做个测试。
@base:46.875rem;
html, body {
height: 100%;
background: #f6;
}
body {
font-size: 46.875px;
}
div {
margin-top: 2rem;
text-align: center;
font-size: 100/@base;
}
保存后，一切正常的情况下就会看到终端报错：
The End
到这里，我们的Quick Start就结束了，怎么样，都跑起来了没？
下一篇，小姐姐将跟大家一起来学习插件stylelint-webpack-plugin，那就酱咯～
