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 專治代碼潔癖（一）