Vscode配置stylelint

1 css代码规范工具stylelint

通常咱们在项目根目录中添加 .stylelintrc.js

module.exports = {
  processors: [],
  plugins: [],
  extends: "stylelint-config-standard", // 这是官方推荐的扩展
  rules: {
    "block-no-empty": null // 值为null时表示禁用该规则：
  }
};

复制代码

官网-规则列表
参考-简书-stylelint介绍

2 项目中安装 stylelint-config-standard npm包

yarn add stylelint-config-standard --dev
复制代码

或者

npm i -D stylelint-config-standard
复制代码

3 vscode安装插件stylelint

3.1 下载地址

stylelint

3.2 配置

在 /.vscode/settings.json 增长配置,这样作是为了同步项目中的配置，固然，你能够在全局设置中设置

settings.json：

// stylelint配置
  "stylelint.enable":true,
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  // 这里你须要安装vscode插件Prettier才可配置
  "prettier.stylelintIntegration": true,
  "[scss]": {
    "editor.formatOnSave": true
  }
复制代码

4 配置忽略文件

项目根目录中增长.stylelintignore和.prettierignore

node_modules
复制代码

至此，设置完毕！~

5 taro项目单位PX大写自动格式化成小写问题

在 Taro 中尺寸单位建议使用 px、 百分比 %，Taro 默认会对全部单位进行转换。当前忽略单个属性的最简单的方法，就是 px 单位使用大写字母Px or PX。

因为咱们以前已经设置prettier插件自动格式化[scss]文件，致使写PX会被自动格式化成小写px

如何避免这个问题，只要在上面写/* prettier-ignore */便可避免自动格式化成小写字母

/* prettier-ignore */
  height: 44PX;
复制代码

参考文章
掘金-css代码规范工具stylelint
掘金-VScode下搭配ESLint、TSLint、stylelint的代码检查配方
掘金-vscode + prettier 专治代码洁癖（一）