[英]Integrating Stylelint with Vue.js
我正在尝试将stylelint集成到我新创建的 Vue 项目中。
我认为这将是一个使用Stylelint Webpack 插件的简单案例,但是当我运行yarn serve
时,任何错误都会完全冻结它而没有输出。 如果我运行yarn build
,构建将按预期失败,但只会打印"There was a stylelint error"
。
我的vue.config.js
如下:
const stylelintPlugin = require('stylelint-webpack-plugin');
module.exports = {
configureWebpack: {
plugins: [
new stylelintPlugin({ files: ['**/*.(vue|scss)'] }),
],
},
};
这是我当前的package.json
版本:
"@vue/cli-service": "^3.9.0",
"stylelint": "^10.1.0",
"stylelint-config-recommended": "^2.2.0",
"stylelint-scss": "^3.9.2",
虽然这可能为时已晚,但这里是使用stylelint-config-recommended-scss
的工作配置。
它是第 3 方stylelint-scss
插件的扩展,需要与stylelint
本身一起安装。 还需要安装stylelint-webpack-plugin
,您的设置中似乎缺少该插件。
安装开发依赖项:
# First remove an unnecessary one you had (with NPM):
npm uninstall stylelint-config-recommended
# Or with Yarn:
yarn remove stylelint-config-recommended
# Install dev deps with NPM:
npm i -D stylelint stylelint-scss stylelint-config-recommended-scss stylelint-webpack-plugin
# Or with Yarn:
yarn add -D stylelint stylelint-scss stylelint-config-recommended-scss stylelint-webpack-plugin
在您的vue.config.js
配置文件中:
const StyleLintPlugin = require('stylelint-webpack-plugin');
module.exports = {
configureWebpack: {
plugins: [
new StyleLintPlugin({
files: ['src/**/*.{vue,scss}'],
}),
],
},
};
在项目的根文件夹中创建一个文件stylelint.config.js
:
module.exports = {
extends: 'stylelint-config-recommended-scss',
rules: {
'selector-pseudo-element-no-unknown': [
true,
{
ignorePseudoElements: ['v-deep']
}
]
}
};
在package.json
你可以添加这个lint:scss
命令(由npm run lint:scss
)。 它尝试对所有规则运行自动修复,但请注意并非所有规则都可以自动修复。
在这种情况下,脚本将输出错误行列表并在错误时退出。 您需要手动修复这些问题,然后重新运行脚本以查看错误是否已修复:
{
"scripts": {
"lint:scss": "stylelint ./src/**/*.{vue,scss} --fix"
}
}
希望这可以帮助! 如果我错过了什么,请添加评论。
我的配置与编写的 ux.engineer 相同,但是当我尝试运行脚本npm run lint:scss
然后我有
node_modules/stylelint/node_modules/get-stdin/index.js:13
for await (const chunk of stdin) {
^^^^^
SyntaxError: Unexpected reserved word
原来我有错误的(旧)节点版本,所以要注意
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.