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


Posted by TempuraEngineer on 2022-06-11

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設為truehtmlWhitespaceSensitivity設為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"

    先確認有沒有安裝processbuffer,沒有的話自行安裝,然後到vue.config.js新增webpack設定

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

    Buffer is not defined


#ESLint #Stylelint #Prettier #linter #formatter







Related Posts

簡明程式解題入門 - 陣列篇 III

簡明程式解題入門 - 陣列篇 III

Introduction to Sequential Testing

Introduction to Sequential Testing

W12_檢討直播

W12_檢討直播


Comments