開發工具之 VSCode

時間 2019-11-30

標籤開發工具 vscode 简体版

原文原文鏈接

你必須在生命的輪迴中，找到本身的位置！ ------ 木法沙javascript

前言

《決戰紫禁之巔》葉孤城介紹本身的劍：此劍乃海外寒劍精英，吹毛斷髮，劍鋒三尺三，淨重六斤四兩。So,我也比較熟悉個人劍——VsCode。css

VsCode

代碼片斷

代碼片斷能夠自定義一些常常用到的操做。好比我在函數聲明和打印 log 時常常用到html

{
    "Lamda 表達式": {
        "prefix": "arrow",

        "body": ["($1) => {$2}"],

        "description": "箭頭函數"
    },
    "註釋模板": {
        "prefix": "zhushi",
        "body": ["/**", "* @author: 張攀欽", "* @description: $1", " */"],
        "description": "註釋"
    },
    "forof循環": {
        "prefix": ["for", "forof"],
        "body": ["for (const ${2:item} of ${1:array}) {", "\t$0", "}"],
        "description": "forof循環"
    },
    "forin循環": {
        "prefix": ["forin", "fori"],
        "body": ["for (const ${2:item} in ${1:array}) {", "\t$0", "}"],
        "description": "forof循環"
    },
    "函數聲明模板": {
        "prefix": ["funct", "func", "function"],
        "body": ["function ${1:name} ($2) { ", "\t$3", "}"],
        "description": "函數聲明模板"
    },
    "函數表達式模板": {
        "prefix": ["cfunct", "cfunc", "cfunction"],
        "body": ["const ${1:func} = function ${2:name}($3) { ", "\t$4", "}"],
        "description": "函數表達式模板"
    },
    "方法註釋模板": {
        "prefix": "fzhushi",
        "body": [
            "/**",
            "* @author: 張攀欽",
            "* @description: $1",
            "* @param {$2} $3",
            "* @returns {$4} $5",
            " */"
        ],
        "description": "註釋方法"
    },
    "打印日誌": {
        "scope": "javascript,typescript",
        "prefix": ["logl", "log"],
        "body": ["console.log($1);", "$2"],
        "description": "console.log打印日誌"
    }
}
複製代碼

代碼片斷文件中爲 jsonvue

{
    "打印日誌": {
        // 做用域，html,js
        "scope": "javascript,typescript",
        // 拼寫匹配字段
        "prefix": ["logl", "log"],
        // 代碼片斷內容 $1 下次輸入的位置佔位，tab 奇幻 $1 $2
        "body": ["console.log($1);", "$2"],
        // 匹配的時候的說明
        "description": "console.log打印日誌"
    }
}
複製代碼

// settings.json 添加如下屬性，自定義的代碼片斷老是優先顯示，否則老是被 VsCode 或插件的排到前面，很不方便
    "editor.snippetSuggestions": "top",
    "editor.tabCompletion": true,
複製代碼

快捷捷

做爲一個 IDEA 重度使用者，我將 VsCode 的快捷鍵儘量適配到 IDEA 了。就不推薦個人按鍵了。應該是最近增長的這個 keymaps 功能，能夠將別的開發工具的快捷鍵搬到 VsCode 裏面。真貼心啊 😃😆java

常常用到的快捷鍵

F1 查看全部命令node

Shift + F12 查看引用,鼠標右鍵便可查看git

Shift + Alt + F12 查看全部引用es6

alt + F12 查看定義,鼠標右鍵便可查看typescript

F12 轉到定義,鼠標右鍵便可查看,很容易找到方法定義npm

觸發建議我自定義了，就不推薦了

觸發參數提示我自定義了，就不推薦了

前進和後端查看代碼調用 Alt + -> Alt + <-

ctrl + ~ 打開或關閉終端

打開上一個編輯器，打開下一個編輯器 Ctrl + Alt + <- ,Ctrl + Alt + ->

VsCode 插件

VsCode 開發工具豐富的插件提高開發效率真的是不要不要的

Chinese (Simplified) Language Pack for Visual Studio Code

這個應該是每一個不習慣英語的開發的福音了 😂😂😂😂

Settings Sync

在強迫症折磨下，我是很是喜歡這個插件的，一鍵同步全部 VsCode 配置。並且做爲一名在 Mac 和 Windows 環境下切換的又高又帥的全棧，mmp，全部的經常使用的快捷鍵必須適配 windows，否則真會瘋的，😆😆，給微軟粑粑點個贊

Todo Tree

這個插件能夠顯示代碼中 TODO ，當你有功能沒有作完，或者作代碼標記是很方便的

Local History

若是你代碼變動了，可是沒有添加到 git 中，並且又想找回，必定要使用 Local History 哦，文件的變動每一個都有副本哦，代碼丟失不存在的哦，記得將 .history 加入到 .gitignore

Code Runner 和調試

這個能夠運行 js 代碼片斷，對於學習 api 仍是頗有幫助的。不過是基於 Node 運行環境將,不過問題不大。

在調試下，能夠查看代碼運行，對於學習的時候，瞭解 js 執行上下文和閉包等等頗有用

// settings.json 添加如下配置
"launch": {
        "configurations": [
            {
                "type": "node",
                "request": "launch",
                "name": "app.js",
                "program": "${workspaceFolder}/app.js"
            },
            // 調試當前 js 文件
            {
                "type": "node",
                "request": "launch",
                "name": "current",
                "program": "${file}"
            }
        ]
    }
複製代碼