将Stylelint与Vue.js集成

Question

我正在尝试将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",

Answer 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"
  }
}

希望这能有所帮助！如果我遗漏了什么，请添加评论。

Answer 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

结果发现我有错误的(旧的)节点版本，所以请注意这一点