Vscode初使用

Vscode初使用

現(xiàn)在的大前端時代來臨,讓我們需要一款前端的編輯器來幫助我們書寫代碼,那么推薦大家給來自微軟的宇宙第一編輯器:Vscode

看了知乎上一篇大佬的文章,刪減了很多不必要的擴展插件:文章

Vscode安裝

軟件的安裝非常簡單,不需要進行額外的破解

首先進入官網(wǎng),下載安裝包

圖片

默認安裝就可以了

Vscode卸載

卸載博客

Vscode插件配置

Vscode的安裝非常簡單,之所以Vscode能作為C/C#/java/html的主流編輯器,就是因為開源的自身吸引了億萬開發(fā)者為Vscode的生態(tài)提供了數(shù)以千計的插件,Vscode這個英雄有了神裝加持變得勇猛無敵.

那么我們作為前端開發(fā)者要想舒舒服服的進行開發(fā)我們需要那些插件呢?

1. 插件如何安裝?

首先在主頁面點擊下圖所示圖標(biāo)

圖片

這樣就進入了插件管理的面板

我們通過上邊的搜索框?qū)⒉寮Q直接進行搜索

然后點擊install就可以安裝了

圖片

2. 命令面板

我們通過快捷鍵shift+ctrl+p打開命令面板

輸入:open settings命令

圖片

接著會打開settings.json文件

我們很多在集成完vscode插件完以后,還得通過settings.json進行某些特定設(shè)置

圖片

3. 前端插件一覽

1. Better Comments(注釋高亮提醒)

書寫的注釋會高亮

圖片

2. Chinese(Simplified) Language Pack for Visual Studio Code(Vscode簡體中文語言包)

這個就不解釋了吧...

圖片

3. Code Runner(運行代碼)

可以選中部分代碼進行運行,支持多種語言

圖片

4. colorize

圖片
  // 高亮
  "colorize.languages": [
    "javascript",
    "css",
    "sass",
    "scss",
    "less",
    "postcss",
    "sss",
    "stylus",
    "xml",
    "svg",
    "html"
  ]

5. Material Theme(主題)

Vscode最有名的一個暗黑系主題,極客風(fēng)范

圖片

6.ESLint

圖片
  // ESlint
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  }

7. Git History(git插件)

能幫助我們把將代碼更舒服的通過git進行同步

圖片

8. GitLens — Git supercharged(git插件)

兩個git插件結(jié)合,git使用的明明白白

圖片

9. Highlight Matching Tag(標(biāo)簽高亮)

圖片
圖片

10. Live Server(在線運行)

圖片

給vscode帶了一個內(nèi)置服務(wù)器,在代碼右鍵開啟

圖片
圖片

默認端口號為5500

11. markdownlint(Markdown語法支持)

圖片

書寫Markdown很舒服

12. Open in External App

此處推薦一波知乎大佬的個人插件

一般我們寫完html代碼后,肯定得通過瀏覽器預(yù)覽相關(guān)效果,這個插件的感覺就很棒

圖片
 //配置了Microsoft Edge和FireFox兩個打開html的瀏覽器
"openInExternalApp.openMapper": [
    {
      // represent file extension name
      "extensionName": "html",
      // the external applications to open the file which extension name is html
      "apps": [
        // openCommand can be shell command or the complete executable application path
        // title will be shown in the drop list if there are several apps
        {
          "title": "Microsoft Edge",
          "openCommand": "C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe"
        },
        {
          "title": "FireFox",
          "openCommand": "D:\\Program Files\\Mozilla Firefox\\firefox.exe",
          // open in firefox under private mode
          "args": ["-private-window"]
        }
      ]
    }
  ]

13. Prettier - Code formatter(代碼格式整理)

圖片

Vscode里最好用的代碼整理工具

安裝完成后,首先在html使用shift+alt+f快捷鍵整理一下代碼格式

因為vscode自身會有代碼整理規(guī)范的工具

右下角就會讓你設(shè)置用那個插件進行代碼格式化,選擇使用Prettier就好了

設(shè)置完成后整理完代碼如下

圖片
// 配置prettier
  // 如果使用eslint的話把js的格式化進行注釋,同時把下方vetur的注釋給打開
  // "vetur.format.defaultFormatter.js": "none",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[yaml]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // 格式化vue文件時vetur格式化
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },

14. REST Client(接口測試調(diào)用)

雖然不會用,但是研究明白了這東西的話,比Postman強

圖片

15. Settings Sync(設(shè)置同步)

Vscode的一大難題就是插件設(shè)置繁瑣,這個會把vscode的相關(guān)設(shè)置同步到github上去,這樣換電腦時,可以一個快捷鍵解決問題

圖片

16. TODO Tree

如果習(xí)慣在應(yīng)用程序代碼中編寫待辦事項的開發(fā)者，可以安裝 TODO Tree這樣的擴展名對于突出顯示整個項目中設(shè)置的待辦事項非常有用。

圖片
 // todo-tree插件
  "todo-tree.tree.showScanModeButton": true,
  "todo-tree.general.tags": ["TODO:", "FIXME:"],
  "todo-tree.highlights.defaultHighlight": {
    "gutterIcon": true
  },
  "todo-tree.highlights.customHighlight": {
    "TODO:": {
      "foreground": "#fff",
      "background": "#ffbd2a",
      "iconColour": "#ffbd2a"
    },
    "FIXME:": {
      "foreground": "#fff",
      "background": "#f06292",
      "icon": "flame",
      "iconColour": "#f06292"
    }
  }

17. Vetur(Vue必備插件)

寫Vue,你不裝這插件行嗎????

圖片

18. vscode-icons(圖標(biāo))

Vscode好看的圖標(biāo)庫之一,你值得擁有

圖片

19. XML

圖片

20. YAML

圖片

settings.json整體配置

{
  // 圖標(biāo)
  "workbench.iconTheme": "vscode-icons",
  // 主題
  "workbench.colorTheme": "Material Theme",
  // 閉合標(biāo)簽
  "editor.renameOnType": true,
  // 自動保存格式化
  "editor.formatOnSave": true,
  // todo-tree插件
  "todo-tree.tree.showScanModeButton": true,
  "todo-tree.general.tags": ["TODO:", "FIXME:"],
  "todo-tree.highlights.defaultHighlight": {
    "gutterIcon": true
  },
  "todo-tree.highlights.customHighlight": {
    "TODO:": {
      "foreground": "#fff",
      "background": "#ffbd2a",
      "iconColour": "#ffbd2a"
    },
    "FIXME:": {
      "foreground": "#fff",
      "background": "#f06292",
      "icon": "flame",
      "iconColour": "#f06292"
    }
  },
  // ESlint
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  // 配置prettier
  // 如果使用eslint的話把js的格式化進行注釋,同時把下方vetur的注釋給打開
  // "vetur.format.defaultFormatter.js": "none",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[yaml]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // 格式化vue文件時vetur格式化
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  //注釋美化
  "better-comments.tags": [
    {
      "tag": "!",
      "color": "#FF2D00",
      "strikethrough": false,
      "backgroundColor": "transparent"
    },
    {
      "tag": "?",
      "color": "#3498DB",
      "strikethrough": false,
      "backgroundColor": "transparent"
    },
    {
      "tag": "http://",
      "color": "#474747",
      "strikethrough": true,
      "backgroundColor": "transparent"
    },
    {
      "tag": "todo",
      "color": "#FF8C00",
      "strikethrough": false,
      "backgroundColor": "transparent"
    },
    {
      "tag": "*",
      "color": "#98C379",
      "strikethrough": false,
      "backgroundColor": "transparent"
    }
  ],
  // 高亮
  "colorize.languages": [
    "javascript",
    "css",
    "sass",
    "scss",
    "less",
    "postcss",
    "sss",
    "stylus",
    "xml",
    "svg",
    "html"
  ],
  //瀏覽器調(diào)試
  "openInExternalApp.openMapper": [
    {
      // represent file extension name
      "extensionName": "html",
      // the external applications to open the file which extension name is html
      "apps": [
        // openCommand can be shell command or the complete executable application path
        // title will be shown in the drop list if there are several apps
        {
          "title": "Microsoft Edge",
          "openCommand": "C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe"
        },
        {
          "title": "FireFox",
          "openCommand": "D:\\Program Files\\Mozilla Firefox\\firefox.exe",
          // open in firefox under private mode
          "args": ["-private-window"]
        }
      ]
    }
  ]
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容