将 Stylelint 与 Vue.js 集成
Posted
技术标签:
【中文标题】将 Stylelint 与 Vue.js 集成【英文标题】:Integrating Stylelint with Vue.js 【发布时间】:2019-11-30 10:00:44 【问题描述】:我正在尝试将 stylelint 集成到我新创建的 Vue 项目中。
我认为这是使用Stylelint Webpack Plugin 的简单案例,但是当我运行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",
【问题讨论】:
我已经添加了这个问题的答案,你有时间看看吗? 【参考方案1】:虽然这可能来得太晚,但这里是使用 stylelint-config-recommended-scss
的有效配置。
它是第三方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"
希望这会有所帮助!如果我遗漏了什么,请添加评论。
【讨论】:
【参考方案2】:我的配置和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
原来我有错误的(旧)节点版本,所以要注意这一点
【讨论】:
以上是关于将 Stylelint 与 Vue.js 集成的主要内容,如果未能解决你的问题,请参考以下文章
vue.js 和 Laravel - 我们如何将 vue js 与 laravel 集成?
prettier 与 Intellij Idea 和 NPM 的集成