個人VSCode外掛&配置

前言

公司電腦炸了,VS用不了 只能重新配置了,之前的整理很爛,這個可以直接用.篩選了許多,多餘的外掛 ,隨時更新

外掛

1. Chinese (Simplified) Language Pack for Visual Studio Code          --漢化
2. ESLint  --程式碼規範檢測
3. HTML CSS Support   -- css提示輔助 可根據引入css自動查詢class(編輯器不帶)
4. language-stylus   -- stylus語法提示與高亮
5. Manta's Stylus Supremacy   --格式化stylus的程式碼
6. open in browser   --html在預設瀏覽器中開啟 ALT+B
7. Path Intellisense   --路徑自動補全 ./
8. Prettier - Code formatter   --美化程式碼(我只用到了在ALT SHIFT F 中 雙引號 變單引號)
9. Project Manager    -- 管理專案 方便切換 (Alt shift p 切換 /ctrl shift p 儲存)
10. Vetur    -- Vue語法高亮 格式化程式碼
11. vscode-icons    -檔案圖示美化
12. Vue VSCode Snippets    --vue程式碼塊
13. Bracket Pair Colorizer     --括號顏色
14. px2rem    -- 把px轉換成rem 因為saber才用的~~~

15. autoprefixer    -- 把css檔案裡的屬性 加上相容性 (公眾號專案未用打包工具)  需要先在keybindings.json中加上{"key": "ctrl+shift+c", "command": "autoprefixer.execute"} 繫結下快捷鍵

Settings

編輯器tab 兩個空格;編輯器可視區域折行;檔案自動儲存;格式化js雙引號變單引號;eslint儲存自動修復;vue template模板格式化,vue 標籤 多跳屬性折行(prettyhtml多條屬性不能折行),stylus 格式化設定;

{
  //這個等於false editor.tabSize才生效
  "editor.detectIndentation": false,
  //tab空格數
  "editor.tabSize": 2,
  //失去焦點自動儲存
  "files.autoSave": "onFocusChange",
  "window.zoomLevel": 1,
  //使用VS code-icons圖示
  "workbench.iconTheme": "vscode-icons",
  //可視區域折行
  "editor.wordWrap": "on",
  //Prettier
  //格式化的時候雙引號變單引號
  "prettier.singleQuote": true,
  //Manta's Stylus Supremacy配置如下
  // 是否插入冒號
  "stylusSupremacy.insertColons": true,
  // 是否插入分好
  "stylusSupremacy.insertSemicolons": false,
  // 是否插入大括號
  "stylusSupremacy.insertBraces": false,
  // import之後是否換行
  "stylusSupremacy.insertNewLineAroundImports": false,
  // 兩個選擇器中是否換行
  "stylusSupremacy.insertNewLineAroundBlocks": false,
  //eslint配置如下
  //eslint 儲存自動格式化
  "eslint.autoFixOnSave": true,
  //eslint 作用檔案
  "eslint.validate": [
    "javascript",
    "html",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  //vetur
  //格式化vue template模板
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      //設定標籤內多個屬性折行
      //Wrap attributes to new lines [auto|force|force-aligned|force-expand-multiline]
      "wrap_attributes": "force-expand-multiline"
    }
  },
  //px2rem
  //根目錄font-size，預設：16px
  "px2rem.rootFontSize": 23.4375,
  //rem保留小數位數，預設：6位。
  "px2rem.fixedDigits": 2,
  //是否開啟註釋，預設：true
  "px2rem.isNeedNotes": false,
  //autoprefixer
  //相容瀏覽器版本
  "autoprefixer.browsers": [
    "last 2 versions",
    "ios >= 8",
  ]
}