将 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 的集成

如何将 PHP smarty 模板与 Vue.js 集成?

如何将 vue.js 与 django 集成?

将 peerjs 与 nuxtjs (vue.js) 集成时出错

将 Laravel 与 Vue js 集成