Vscode安裝與設定

文章目錄

• • 1 軟體下載下傳
  • 2 英文漢化
  • 3 Vscode安裝插件
  • 4 VSCode中的git可視化管理工具
  • 5 VsCode快捷鍵
  • 6 Vscode代碼無法折疊問題
  • 7 vscode終端設定為bash形式，并設定eslint

畢業了，工作的第二天，師傅看到我用的webstrom，讓我趕緊換成VSCode，雖然我覺得webstrom其實也挺好用的，但為了和師父他們一緻，就裝一下VSCode吧，記錄一下配置過程！

（師傅推薦）：

史上最全vscode配置使用教程

VSCode新手入門教程

1 軟體下載下傳

官網位址

過程中全選了，避免後期缺少東西，然後直接安裝即可。

2 英文漢化

安裝完成是英文的，漢化後友善我們使用。

方法：直接在擴充程式中搜尋 chinese ，會出現對應插件，裝該插件，然後重新開機即可

3 Vscode安裝插件

參考：VSCode新手入門教程

常用插件安裝：

提示自己：注意上面的prettier-code formatter不用安裝，因為我們項目中用到的是ESLint校驗方式

下面是vue的插件安裝：

檔案夾圖示如下：

ctrl+~打開終端

ctrl+滾輪 放大縮小設定（檔案->首選項->設定->使用者->拓展 下的JSON）：

然後在settings.json中添加

"editor.mouseWheelZoom": true,

，然後儲存即可。注意有逗号。

4 VSCode中的git可視化管理工具

輸入框是像git commit -m ‘提示資訊’那樣的東西

上面會有送出進度

3中 a表示add m：修改 删除 d u應該是更新？

點選上面三個點有push，可以将代碼push到雲端

5 VsCode快捷鍵

非常全的VsCode快捷鍵

6 Vscode代碼無法折疊問題

1. 打開Vscode中的設定
2. 在搜尋框中搜尋folding
3. 将折疊政策由auto改為indentation

   

7 vscode終端設定為bash形式，并設定eslint

檔案——>首選項——>設定，在設定的搜尋框中輸入“terminal.integrated.shell.windows”，打開settings.json檔案，設定檔案中的terminal.integrated.shell.windows為自己電腦中git bash.exe的位置

下面是設定eslint

先在應用商店中安裝ESLint，然後設定settings.json檔案如下：

{
    "editor.formatOnSave": true,
    "javascript.format.enable": true,
    "html.format.enable": false,
    "files.eol": "\n",
    "terminal.integrated.shell.windows": "D:\\Worktools\\Git\\Git\\bin\\bash.exe",
    "files.autoSave": "onFocusChange",
    "vetur.format.enable": false,
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    "eslint.options": {
        "configFile": "./.eslintrc.js"
    },
    "eslint.alwaysShowStatus": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        },
        "vue"
    ],
    "eslint.autoFixOnSave": true,
    "eslint.format.enable": true,
    "eslint.lintTask.enable": true,
    "eslint.onIgnoredFiles": "warn",
    "eslint.probe": [
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact",
        "html",
        "vue",
        "markdown",
        "saas"
    ],
    "editor.tabSize": 2,
    "workbench.iconTheme": "vscode-icons",
    "vsicons.dontShowNewVersionMessage": true,
    "editor.mouseWheelZoom": true,
    "json.schemas": []
}
           

然後就可以啦！！！