eslint
1. 需要安装的依赖
npm install -D eslint eslint-loader eslint-friendly-formatter eslint-plugin-babel
npm install -D babel-eslint eslint-plugin-html eslint-plugin-import eslint-plugin-promise eslint-plugin-node eslint-config-standard eslint-plugin-standard
2. 新建 .eslintrc.js
在项目根目录新建 .eslintrc.js 文件，添加如下内容
module.exports = {
root: true, // 作用的目录是根目录
parser: 'babel-eslint',
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module' // 按照模块的方式解析
},
env: {
browser: true, // 开发环境配置表示可以使用浏览器的方法
node: true
},
extends: [
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
'standard'
],
rules: {
// 自定义的规则
"linebreak-style": [0 ,"error", "windows"],
"indent": ['error', 4],
'semi': ['error', 'always'], // 语句后必须加分号
}
}
3. 修改webpack.dev.conf.js文件
添加如下rule
{
test: /\.jsx?$/, // 匹配js文件或者jsx文件
use: [
{
loader:'eslint-loader',
options: { // 这里的配置项参数将会被传递到 eslint 的 CLIEngine
formatter: require('eslint-friendly-formatter') // 指定错误报告的格式规范
}
}
],
enforce: "pre", // 编译前检查
exclude: /node_modules/, // 不检测的文件
include: [path.resolve(__dirname, '../', 'src')], // 指定检查的目录
},
4. 让错误直接标注在对应的文件中
- vscode 安装 eslint 扩展
- 在 配置中，也就是
settings.json中添加"eslint.validate": [ "javascript", "react" ]的配置即可 - 保存时自动按照eslint 格式化当前文件，在 setting.json 中配置
"eslint.autoFixOnSave": true,
stylelint
1. 安装依赖
npm install -D stylelint stylelint-config-standard stylelint-webpack-plugin
2. 新建 .stylelintrc.js
在项目根目录新建 .stylelintrc.js 文件，添加如下内容
module.exports = {
processors: [],
plugins: [],
extends: "stylelint-config-standard", // 这是官方推荐的方式
rules: {
// 这里自定义规则
// 可参考官方：https://stylelint.docschina.org/user-guide/rules/
}
};
3. 修改webpack.dev.conf.js文件
添加如下代码
const StyleLintPlugin = require('stylelint-webpack-plugin');
// 在 plugins 中添加如下配置
new StyleLintPlugin({
context: "src",
configFile: path.resolve(__dirname, '../.stylelintrc.js'), // 指定 stylelint 配置的文件
files: '**/*.less',
failOnError: false,
quiet: true,
syntax: 'less'
}),
4. 让错误直接标注在对应的文件中
- vscode 安装
stylelint扩展，请注意：安装完插件后一定要重新加载，不然不会在文件中标注出错误 - 在 配置中，也就是 settings.json 中添加如下配置
"stylelint.enable": true, "css.validate": false, "less.validate": false, "scss.validate": false,
