iT邦幫忙

5

Visual Studio Code設定與插件

Ares 2019-02-23 17:45:4517573 瀏覽

因為小弟最近買了新電腦,順便記錄一下各式各樣的插件,首先安裝以下幾個東西~


接下來開始介紹套件拉~

indent-rainbow

使縮排增加顏色,比較美觀~
indent-rainbow 預覽圖片


vscode-icons

提供有夠潮的 icon
vscode-icons 預覽圖片


cdnjs

按下 F1,輸入 cdnjs,可以快速查找 cdn
cdnjs 預覽圖片


Prettier

快速排版~快捷鍵 Ctrl + Shift + F
以下為小弟習慣的設定:
1.切換視窗時自動存檔
2.存檔後自動執行
3.使用單引號

{
  "files.autoSave": "onWindowChange",
  "editor.formatOnSave": true,
  "prettier.singleQuote": true
}

Prettier 預覽圖片


Bracket Pair Colorizer

括號顏色與括號對應~
Bracket Pair Colorizer 預覽圖片


Preview on Web Server

於本機開啟 Web Server,即時預覽程式碼
Preview on Web Server 預覽圖片


Live Server

於本機開啟 Web Server,即時預覽程式碼
Live Server 預覽圖片


Live Sass Compiler

可以幫 sass 或 scss 編譯出 css 檔案
以下為設定總共做了幾件事:
1.設定產出檔案的路徑與資料夾名稱
2.各瀏覽器的 prefix
3.不產出 map 檔

{
  "liveSassCompile.settings.formats": [
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "/src/css"
    },
    {
      "format": "compressed",
      "extensionName": ".min.css",
      "savePath": "/dist/css"
    }
  ],
  "liveSassCompile.settings.autoprefix": ["> 1%", "last 2 versions"],
  "liveSassCompile.settings.generateMap": false,
}

Live Sass Compiler 預覽圖片


ESLint

能為程式碼增加規範,使程式碼更整齊
ESLint 預覽圖片


Git History

可以直接看到 commit 紀錄
Git History 預覽圖片


git-autoconfig

切換 git 使用者
git-autoconfig 預覽圖片


GitLens

在程式碼後方可以看到 commit 詳細資訊
GitLens 預覽圖片


gitignore

有兩種 gitignore 套件
1.自動產生對應語言的 .gitignore 檔案
2.右鍵可將檔案加入 .gitignore
gitignore 預覽圖片


gitflow

開啟專案各種 branch
gitflow 預覽圖片


Auto Rename Tag

可以一次更改前後 Tag
Auto Rename Tag 預覽圖片


vue

能讓 .vue 檔案較容易閱讀
vue 預覽圖片


Vue 2 Snippets

新增一些 vue 的常用模板
Vue 2 Snippets 預覽圖片


Vetur

補齊一些 vue 的提示與片段功能
Vetur 預覽圖片


以上就是小弟常用的一些插件
附上所有設定,字體: source-code-proFiraCode

{
  // 更改字體
  "editor.fontFamily": "'Fira Code', 'Source Code Pro', Consolas, 'Microsoft JhengHei'",
  // 開啟連字符號
  "editor.fontLigatures": true,
  // 主題
  "workbench.colorTheme": "One Dark Pro",
  // icon
  "workbench.iconTheme": "vscode-icons",
  // 將 tab 設定為 2 個空白鍵
  "editor.tabSize": 2,
  // 將 Terminal 修改為 Git Bash
  "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
  // 刪除檔案時確認
  "explorer.confirmDelete": false,
  // git 自動 fetch
  "git.autofetch": true,
  // 拖曳移動檔案不彈出確認視窗
  "explorer.confirmDragAndDrop": false,
  // js 與 ejs 可使用 emmet
  "emmet.includeLanguages": {
    "javascript": "html",
    "ejs": "html"
  },
  
  // Format 設定 - 使用套件 Prettier
  // 切換視窗自動儲存
  "files.autoSave": "onWindowChange",
  // 儲存時自動排版
  "editor.formatOnSave": true,
  // 每行寬度
  "prettier.printWidth": 80,
  // JS 使用單引號
  "prettier.singleQuote": true,
  // 盡可能省略箭頭函式的括號
  "prettier.arrowParens": "avoid",
  // 字與括號保有空格
  "prettier.bracketSpacing": true,
  // 盡可能不加逗號
  "prettier.trailingComma": "none",
  // 句尾加上分號
  "prettier.semi": true,
  
  // eslint 自動修正
  "eslint.autoFixOnSave": true,
  // eslint 排版 html 與 vue 檔
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "eslint.options": {
    "plugins": [
      "html"
    ]
  },
  
  // liveSassCompile 產出設定
  "liveSassCompile.settings.formats": [
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "/src/css"
    },
    {
      "format": "compressed",
      "extensionName": ".min.css",
      "savePath": "/dist/css"
    }
  ],
  // autoprefix 設定
  "liveSassCompile.settings.autoprefix": [
    "> 1%",
    "last 2 versions"
  ],
  // 不產生 cssmap
  "liveSassCompile.settings.generateMap": false,
  
  // Vetur 不驗證模板
  "vetur.validation.template": false,
  
  // git 設定使用者
  "git-autoconfig.configList": [
    {
      "user.email": "XXXXXXXXX@gmail.com",
      "user.name": "XXXXXX"
    }
  ]
}

1 則留言

0
weilc
iT邦新手 5 級 ‧ 2020-06-09 14:38:03

剛剛下載vscode-icons來用 真的賞心悅目

我要留言

立即登入留言