标签: stylelint

我试图取代咕噜-SCSS -皮棉(因为它的红宝石依赖和沉默失败的时候你没有安装GEM)与stylelint.

我遇到的问题是以下错误:

$ grunt                                                                        
Loading "Gruntfile.js" tasks...ERROR
>> ReferenceError: Map is not defined

我认为这是因为stylelint(这是一个PostCSS插件,而不是Grunt插件)需要ES6.

这是抛出Map is not defined错误的代码.

有没有什么方法可以让我在我可以运行的地方工作,grunt而不是像这样的一些奇怪的解决方法？

我使用gulp-stylefmt,每次保存任何CSS文件时都会运行:

function stylelint () {
  return gulp.src('src/**/*.css')
    .pipe($.stylefmt())
    .pipe(gulp.dest('src/'));
}

同时gulp.watch监视路径src/**/*.css并再次运行stylelint任务.

控制台输出:

[16:32:24] Starting 'stylelint'...
[16:32:25] Finished 'stylelint' after 554 ms
[16:32:25] Starting 'stylelint'...
[16:32:25] Finished 'stylelint' after 60 ms
[16:32:25] Starting 'stylelint'...
[16:32:25] Finished 'stylelint' after 33 ms
[16:32:25] Starting 'stylelint'...
[16:32:25] Finished 'stylelint' after 36 ms
[16:32:26] Starting 'stylelint'...
[16:32:26] Finished 'stylelint' after 34 ms
[16:32:26] Starting 'stylelint'...
[16:32:26] Finished 'stylelint' after 29 ms
[16:32:26] Starting 'stylelint'...
[16:32:26] Finished 'stylelint' after 27 …

在我的 stylelintrc.js

module.exports = { "extends": [ "stylelint-config-standard", "stylelint-config-css-modules", ], "plugins": [ "stylelint-performance-animation", ], ...

在 codeclimat.yaml 中，我打开 stylelint 引擎并在 codeclimete 上出现此错误

•• 时间：.engineConfig：0.049s 错误：找不到“stylelint-config-css-modules”。你需要configBasedir吗？有关更多信息，请参阅https://docs.codeclimate.com/docs/stylelint 上的文档。

有人可以解释一下如何启用插件和扩展吗？

在提交之前我使用husky来检查JS.在我的package.json我有

"scripts": {
    "lintStyles": "stylelint app/**/*.scss",
    "fixStylesLinting": "stylelint app/**/*.scss --fix",
    "lintJS": "eslint app/**/*.js",
    "fixJSLinting": "eslint --fix app/**/*.js",
    "precommit": "npm run lintJS"
  }

它的工作原理,我不明白的是我如何运行lintJS,lintStyles命令.

我想在我的VScode文本编辑器上使用css linter " stylelint ".我下载了插件并安装它,然后我制作了"css.validate":false.但我没有任何框显示我的CSS文件错误.我能做什么 ？

我正在为一个项目设置 stylelint，从 cli 运行时，一切都按预期工作：

$ stylelint 'css/**/*.css' --fix

css/style.css
 20:18  ×  Expected newline after ":" with a multi-line declaration declaration-colon-newline-after
...
...

但是，当作为npm script无输出运行时（超出记录命令）并且错误似乎被忽略：

$ npm run stylelint

> project lint:css path/project
> stylelint 'css/**/*.css' --fix    

包.json

  "scripts": {
    ...
    "stylelint": "stylelint 'css/**/*.css' --fix"
  },

知道当 stylelint 作为 npm 脚本运行时如何获取控制台输出并退出错误吗？

背景：

我使用的是Prettier-VSCode的代码格式化扩展程序，可以在保存时自动格式化我的代码。

问题：

我习惯在我的sass文件（只有一个属性）中写单行块，即

.some-class { background: #f00; }

问题是Prettier扩展程序将其格式化为多行，即

.some-class {
    background: #f00;
}

似乎更漂亮的样式样式用于css / scss文件，我发现可以通过在设置中启用此设置来覆盖这些设置：

"prettier.requireConfig": true并使用.prettierrc.js文件，但无法关闭单行块的棉绒。如果有人在此有任何修复，将不胜感激。

谢谢

更新：

设置不能被覆盖"prettier.requireConfig": true。该更漂亮-代码格式化扩展VSCode没有一个选项，编辑从样式设置VSCode掉毛。

但是，有一个选项可以启用stylelint集成，但这需要stylelint和prettier-prettier npm模块。

默认情况下，漂亮的样式将标准stylelint配置用于样式表的样式和格式设置。

在下面发布解决方案。

当我尝试时npm start，错误：

没有为... / main.scss提供配置，插件“ gulp-stylelint”中存在错误。

谁来帮帮我！

现在，我正在尝试使用 Prettier 并遵循 Stylelint 的规则来格式化我的 SCSS 代码。我很难让这两个人站在一起。

例如，declaration-colon-new-line对于以下 scss 代码，我不断收到 stylelint 错误（这是正确的）：

background-image: linear-gradient(45deg, transparent 50%, #263b59 50%),
    linear-gradient(135deg, #263b59 50%, transparent 50%),
    radial-gradient(transparent 0%, transparent 0%);

使用 Prettier 格式化后，它应该如下所示（或满足规则的内容），但我找不到选项或如何执行此操作：

background-image: 
    linear-gradient(45deg, transparent 50%, #263b59 50%),
    linear-gradient(135deg, #263b59 50%, transparent 50%),
    radial-gradient(transparent 0%, transparent 0%);

谁能帮我让 Prettier 按照 Stylelint 的规则自动格式化内容？我对此很陌生，所以有点失落。

我按照指南安装stylelintvscode 扩展，但它在我的计算机上不起作用。

我非常确定我遵循了所有必要的步骤。

• 安装扩展。
• 在用户设置中禁用内置的 linter。
• 使用 npm 安装 stylelint 及其标准配置。
• 在我的项目的根目录中创建一个 .stylelintrc.json 配置文件。
• 从命令行运行 stylelint。

但是扩展仍然没有自动验证CSS，这是怎么回事？