标签: stylelint

我正在使用 stylelints，并且我有一些想要禁用的规则：

在 less 中我必须以这种方式进行计算，top: calc(~'50% + 30px');但“function-calc-no-invalid”阻止它

https://stylelint.io/user-guide/rules/function-calc-no-invalid

另外，我想让我的更少的代码直接将 css 应用到组件，这样

my-componet { width:100px}所以我需要禁用“选择器类型无未知”

https://stylelint.io/user-guide/rules/selector-type-no-unknown

我尝试创建一个 .stylelintrc 文件并添加以下内容

    "selector-type-no-unknown": "custom-elements",
    "function-calc-no-invalid": "false",

和许多变化，但我不断得到

无效选项：规则“function-calc-no-invalid”的意外选项值“false” 无效选项：规则“selector-type-no-unknown”的意外选项值“custom-elements”

我正在尝试将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 stylelint-config-standard，并且我的样式表经常遇到此错误：

no-descending-specificity

发生这种情况的一个例子是当我有这样的 CSS 时：

.footer__social li a {}

.footer__social li a:hover {}

.footer__links li a {}

.footer__links li a:hover {}

然后我收到以下错误：

Expected selector ".footer__links li a" to come before selector ".footer__social li a:hover" no-descending-specificity。

由于使用了 SASS，很多 CSS 都会像这样：

.footer__links {
  a {
    a:hover {}
  }
}

如果可以的话我不想禁用它......

但它为什么抱怨呢？因为它是两个独立的类：.footer__social和.footer__links。

因此，锚点的这两个声明彼此没有任何影响，因为它们具有不同的父类，那么问题是什么？我会理解这样的事情：

.footer__links a:hover {}
a {}

但如果是两个不同的班级，我不认为有问题......

我正在安装stylelint-config-styled-components一个反应项目.

当我执行npm run lint:css(或直接通过CLI使用stylelint命令)时,我没有得到任何结果.我故意添加了额外的空格和重复的样式声明,所以应该有一些来自stylelint的反馈我已经破坏了规则.但是,我什么也没得到,甚至没有错误信息.有任何想法吗？

我安装了以下软件包:

• stylelint 9.1.3
• stylelint-config-recommended 2.1.0
• stylelint-config-styled-components 0.1.1
• stylelint-processor-styled-components 1.3.1

我在使用以下脚本package.json:

"scripts": {
    //other scripts
    "lint:css": "stylelint './src/**/*.js'"
}

我的内容.stylelintrc:

{
 "processors": ["stylelint-processor-styled-components"],
 "extends": [
   "stylelint-config-recommended",
   "stylelint-config-styled-components"
 ]
}

我的项目的文件结构(我已经尝试直接在具有相同结果的文件上运行命令,所以我不认为这是一个无法找到.js文件的问题)

-root
    -.stylelintrc
    -src
      -Components
        -Directory
          -ThingIWantLinted.js
        -AnotherDirectory
          -AnotherThingTolint.js

我按照此文档将 CSS 重置添加到我的应用程序中。
https://create-react-app.dev/docs/adding-css-reset/#indexcss

但它显示了这条消息：

"stylelint": {
"extends": "stylelint-config-recommended",
"rules": {
  "at-rule-no-unknown": null
}

怎么解决这个问题啊，好烦啊……

在ubuntu上运行正常

我在 iOS 上安装了 stylelint，但是当我运行它时，我得到了

错误：找不到“stylelint-config-standard”。你需要一个吗configBasedir？

我的配置文件是：

$ cat .stylelintrc.json
{
  "extends": "stylelint-config-standard",
  "rules": {
    "rule-empty-line-before": null,
    "at-rule-empty-line-before": null
  }
}

我尝试过"extends": ["stylelint-config-standard"], ，但没有帮助

PostCSS BEM Linter插件需要每个块的组件定义,这在遗留项目中是一件非常耗时的事情.

有没有办法使用stylelint检查类模式并在项目的所有样式表(在我的例子中为.scss)中显示错误,而不需要在每个文件/块中进行组件定义？

https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

.block {}
.block__element {}
.block--modifier {}

第一次尝试使用 CSS 变量。在 React ( create-react-app) 应用程序中执行此操作，并且效果很好。唯一的问题是，如果我输错了变量名或者只是忘记定义它，则不会出现警告。

例如，有没有办法配置 stylelint 或 scss 来在我使用尚未设置的 CSS 变量时发出警告？或者 FireFox 中的设置/扩展？某物？

我在 Webpack 中使用 StyleLint。

我当前的 Webpack 配置是：

module.exports.styleLint = (isProd = false) => {
  const options = {
    configFile: './.stylelintrc.json',
    files: '**/*.less',
    format: 'less',
    failOnError: false,
    quiet: false,
    emitErrors: isProd
  };
  return new StyleLintPlugin(options);
};

如何指定 StyleLint 忽略的一些文件夹或文件（我不想在输出中看到任何错误）？

笔记：

我不想添加

/* stylelint-disable */

在这些文件中。

我正在尝试使用stylelint和stylelint-selector-bem-pattern插件来检查 BEM 风格，但无法让它工作。

我的配置如下：

\n
• 节点：5.11.0
\n
• gulp-stylelint: ^2.0.2
\n
• stylelint-选择器-bem-模式：^0.2.3
\n

.stylelintrc

{\n    "plugins": [\n        "stylelint-selector-bem-pattern"\n    ],\n    "rules": {\n        "selector-bem-pattern": {\n            preset: "suit"\n        },\n    },\n    "extends": "@alienlebarge/stylelint-config",\n}\n

以及用于测试的 CSS 文件

.12ad2-asd--sad {\n    color: rgba(255, 0, 0, .5);\n}\n\n\n\n\n\n\n#yeah {\n    height: 10px;\n}\n

我从插件中收到错误消息@alienlebarge/stylelint-config，但不是从stylelint-selector-bem-pattern插件中收到错误消息

src/assets/foehn/styles/foehn.css\n 4:1  \xe2\x9c\x96  Unexpected empty line    max-empty-lines\n 5:1  \xe2\x9c\x96  Unexpected empty line    max-empty-lines\n 6:1  \xe2\x9c\x96  Unexpected empty line    max-empty-lines\n 7:1  \xe2\x9c\x96 …