變成rule的形狀(4) - ESLint + Prettier + Stylelint 問題集

Stylelint問題

1. import檔名有的scss時，報錯"Unexpected leading underscore in imported partial name"
   
   partial name意指為了不要讓SASS編譯，而在檔名開頭加上。

   這個報錯只要讓SASS認為@import的是純css就能解開，有4種方式

   • 副檔名改以.css
   • 檔名以protocol開頭
     @import "http://_variable.scss";-
   • 檔名是url()

     @import url("../index.css");
     

   • 在結尾加上screen

     @import "index.scss" screen;
     

     at-import-no-partial-leading-underscore

2. Unexpected extension ".scss" in @import (scss/at-import-partial-extension)
   意指@import的.scss檔不該有副檔名

   • 把附檔名去掉

   • 修改.stylelintrc.js

     // 設為一定要有副檔名
     at-import-partial-extension:'always'
     

3. 使用tailwind時，報錯"Unexpected unknown at-rule "@tailwind" scss/at-rule-no-unknown"
   

    rules: {
    "at-rule-no-unknown": null,
    "scss/at-rule-no-unknown": [true, { ignoreAtRules: ["tailwind"] }],
    }
   

   Unexpected unknown at-rule "@tailwind" scss/at-rule-no-unknown

4. 使用map-get時，報錯"Unknown function 'map-get'"
   
   圖中的方式是先使用@use "sass:map";引入SASS map module，然後使用map module下的get()，再透過function-no-unknown定義ignore function

   "rules": {
      "function-no-unknown":[true, {"ignoreFunctions":["map.get"]}],
    }
   

   function-no-unknown
   The Next-Generation Sass Module System: Draft 6

Prettier

1. HTML起始標籤結尾、結尾標籤結尾一直掉到下一行
   

   bracketSameLine設為true、htmlWhitespaceSensitivity設為ignore

ESLint(整合Prettier)

1. 即便fix過了每次打開專案仍瘋狂報錯"Delete ␍ prettier/prettier"
   如果電腦作業系統是Windows，直接改全域設定，然後重新pull專案

    git config --global core.autocrlf false
   

   Why do I keep getting Delete 'cr' [prettier/prettier]?

2. ESLint跟Prettier瘋狂起衝突
   檢查有無安裝eslint-config-prettier。沒有的話先安裝，再設定.eslintrc.js。

   eslint-config-prettier會幫你關掉ESLint和Prettier起衝突的rule

    // 記得放在extends的最後一個
   
    extends: [
      'eslint-config-prettier',
    ],
   

   Prettier - ESLint Integrations

其他

1. "can not resolve url."

   專案的依賴，或依賴的依賴需要url。從webpack 5開始不會自動幫你安裝，自行安裝即可解決

2. "Uncaught ReferenceError: Buffer is not defined"

   先確認有沒有安裝process、buffer，沒有的話自行安裝，然後到vue.config.js新增webpack設定

    const webpack = require('webpack');
   
    configureWebpack: {
      plugins: [
        new webpack.ProvidePlugin({
          process: 'process/browser',
          Buffer: ['buffer', 'Buffer'],
        }),
      ],
    },
   

   Buffer is not defined