在webpack中使用stylelint（一） Quick St

2017-11-02 本文已影响220人 elle0903

stylelint

前言

在学习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，那就酱咯～