国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

提高開發(fā)效率之VS Code基礎(chǔ)配置篇

LucasTwilight / 2190人閱讀

摘要：相對(duì)于來說是免費(fèi)的。配置注當(dāng)前相關(guān)的配置基于版本。，該設(shè)置是用來控制光標(biāo)的粗細(xì)，目前設(shè)置大小為。，這個(gè)不用多說，給提供了相關(guān)功能。總結(jié)總體上來說是一個(gè)使用比較方便的編輯器，能夠通過一些特定的插件提高你的工作效率。

背景

之前一直是只用WebStorm作為IDE來編寫代碼，但是由于：

手中的這臺(tái)Mac接了兩個(gè)顯示器以后，使用WebStorm會(huì)有卡頓。

WebStorm需要付費(fèi)（雖然可以通過某方法和諧）。

所以需要尋找一個(gè)新的編輯器或者IDE來進(jìn)行邊寫代碼。

為什么選擇VS Code

VS Code的性能明顯由于Atom。

VS Code的插件系統(tǒng)使用方便程度遠(yuǎn)高于Sublime。

VS Code相對(duì)于WebStorm來說是免費(fèi)的。

VS Code配置

注：當(dāng)前VS Code相關(guān)的配置基于v1.20.1版本。

用戶設(shè)置

在首選項(xiàng)->設(shè)置中，能夠?qū)S Code相關(guān)的屬性進(jìn)行設(shè)置，目前有調(diào)整字段如下：

"editor.fontSize": 16，該設(shè)置用來調(diào)整編輯器中的字體大小，目前設(shè)置大小為16。

"files.autoSave": "onFocusChange"，該設(shè)置用來調(diào)整編輯器的自動(dòng)保存策略，當(dāng)前字段含義為當(dāng)該文件失焦后保存，即切換到其他應(yīng)用或者文件的時(shí)候自動(dòng)進(jìn)行一次保存。

"editor.cursorWidth": 2，該設(shè)置是用來控制光標(biāo)的粗細(xì)，目前設(shè)置大小為2。

"editor.suggestSelection": "recentlyUsedByPrefix"，該設(shè)置是用來控制自動(dòng)補(bǔ)全的建議，目前設(shè)置為根據(jù)之前補(bǔ)全過建議的前綴來進(jìn)行建議，大概的意思就是你上次通過co選擇了const，這次你再輸入co的時(shí)候，也會(huì)建議你選擇const。

代碼片段

VS Code可以通過名為代碼片段的功能像編輯器中插入一段指定的文本，具體操作步驟為首選項(xiàng)->用戶代碼片段->新建全局代碼片段。

我們可以增加一些常用的文件聲明注釋、通用模板等代碼片段，從而避免頻繁的復(fù)制粘貼和重復(fù)勞動(dòng)。

我舉一個(gè)簡(jiǎn)單的文件聲明注釋的例子來說明下這個(gè)功能：

{
    // Place your snippets for javascript here. Each snippet is defined under a snippet name and has a prefix, body and 
    // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
    // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
    // same ids are connected.
    // Example:
    // "Print to console": {
    //     "prefix": "log",
    //     "body": [
    //         "console.log("$1");",
    //         "$2"
    //     ],
    //     "description": "Log output to console"
    // }
    "JS & TS description": {
        "prefix": "jsfile",
        "body": [
            "/**",
            "* @module ${TM_FILENAME_BASE}",
            "* @author: Hjava",
            "* @since: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}",
            "*/",
            "",
            ""use strict";",
            ""
        ],
        "description": "Insert description."
    }
}

其中，JS & TS description表示這個(gè)片段的名稱，其他具體字段含義如下表所示：

字段 說明
prefix 前綴，即你在編輯器中輸入的內(nèi)容為前綴指定內(nèi)容時(shí)，能夠在編輯器建議中選擇此片段。
body 具體文本內(nèi)容，在選擇此片段后，會(huì)將此數(shù)組根據(jù) 進(jìn)行組合輸出到編輯器中。
其中有部分特定的常量，可以獲取輸入時(shí)的部分信息，如：
${CURRENT_YEAR}:當(dāng)前年份，具體字段可以見此處
說明：在寫此文章時(shí)，部分1.20.0版本增加的常量并不在上面的文檔中，具體字段為： CURRENT_YEAR：年（4位數(shù)） CURRENT_YEAR_SHORT：年（2位數(shù)） CURRENT_MONTH：月 CURRENT_DATE：日 CURRENT_HOUR：小時(shí) CURRENT_MINUTE ：分鐘 CURRENT_SECOND：秒
description 描述說明，在片段說明中會(huì)顯示此字段的文本內(nèi)容。

具體示例效果如下：

插入后效果如下：

插件

在左側(cè)插件面板中，可以進(jìn)行插件的搜索、安裝與卸載。推薦插件如下：

Auto Close Tag，能夠在你編寫HTML中自動(dòng)幫你加上閉合的標(biāo)簽。

Auto Rename Tag，能夠在你修改一個(gè)標(biāo)簽時(shí)自動(dòng)調(diào)整與之成對(duì)的另一個(gè)標(biāo)簽。

js-beautify for VS Code，能夠格式化你的JavaScript文件。當(dāng)然，它還提供了格式化JSON的能力。

Beautify css/sass/scss/less，它能夠讓你對(duì)CSS相關(guān)文件進(jìn)行格式化。

Better Comments，能夠讓你的注釋看上去更加友好。

Document This，能夠自動(dòng)的給函數(shù)和方法添加注釋。

ESLint，這個(gè)不用多說，給VS Code提供了ESLint相關(guān)功能。

PostCSS Syntax Highlighting，能夠讓VS Code支持PostCSS語法。

vscode-icons，能夠讓你的文件樹增加圖標(biāo)標(biāo)識(shí)。

總結(jié)

VS Code總體上來說是一個(gè)使用比較方便的編輯器，能夠通過一些特定的插件提高你的工作效率。相較于其他的IDE或者編輯器來看，他有著自己獨(dú)特的優(yōu)勢(shì)。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/51843.html

相關(guān)文章

  • 提高開發(fā)效率之VS Code基礎(chǔ)配置篇

    摘要：相對(duì)于來說是免費(fèi)的。配置注當(dāng)前相關(guān)的配置基于版本。，該設(shè)置是用來控制光標(biāo)的粗細(xì)，目前設(shè)置大小為。，這個(gè)不用多說，給提供了相關(guān)功能。總結(jié)總體上來說是一個(gè)使用比較方便的編輯器，能夠通過一些特定的插件提高你的工作效率。 背景 之前一直是只用WebStorm作為IDE來編寫代碼，但是由于： 手中的這臺(tái)Mac接了兩個(gè)顯示器以后，使用WebStorm會(huì)有卡頓。 WebStorm需要付費(fèi)（雖然可以...

    wing324 評(píng)論0 收藏0

  • 提高開發(fā)效率之VS Code基礎(chǔ)配置篇

    摘要：相對(duì)于來說是免費(fèi)的。配置注當(dāng)前相關(guān)的配置基于版本。，該設(shè)置是用來控制光標(biāo)的粗細(xì)，目前設(shè)置大小為。，這個(gè)不用多說，給提供了相關(guān)功能。總結(jié)總體上來說是一個(gè)使用比較方便的編輯器，能夠通過一些特定的插件提高你的工作效率。 背景 之前一直是只用WebStorm作為IDE來編寫代碼，但是由于： 手中的這臺(tái)Mac接了兩個(gè)顯示器以后，使用WebStorm會(huì)有卡頓。 WebStorm需要付費(fèi)（雖然可以...

    svtter 評(píng)論0 收藏0

  • 提高 JavaScript 開發(fā)效率的高級(jí) VSCode 擴(kuò)展之二！

    摘要：將這些命令綁定到鍵盤快捷鍵是有幫助的，例如向上箭頭用于平衡向外，而向下箭頭用于平衡向內(nèi)。是和的快速原型開發(fā)平臺(tái)。 本系列的第一篇可以在這里看到： 提高 JavaScript 開發(fā)效率的高級(jí) VSCode 擴(kuò)展！ showImg(https://segmentfault.com/img/bVbnn2j?w=1254&h=768); 想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,一年百來篇優(yōu)質(zhì)...

    cyrils 評(píng)論0 收藏0

  • 架構(gòu)師之路

    摘要：因?yàn)橛脩舨挥迷诘谝淮芜M(jìn)入應(yīng)用時(shí)下載所有代碼，用戶能更快的看到頁(yè)面并與之交互。譯高階函數(shù)利用和來編寫更易維護(hù)的代碼高階函數(shù)可以幫助你增強(qiáng)你的，讓你的代碼更具有聲明性。知道什么時(shí)候和怎樣使用高階函數(shù)是至關(guān)重要的。 Vue 折騰記 - (10) 給axios做個(gè)挺靠譜的封裝(報(bào)錯(cuò),鑒權(quán),跳轉(zhuǎn),攔截,提示) 稍微改改都能直接拿來用~~~喲吼吼,喲吼吼..... 如何無痛降低 if else 面...

    NikoManiac 評(píng)論0 收藏0

  • 前端技術(shù) 博客文章、書籍 積累

    摘要：好多編輯器例如等都支持這樣的語法來快速的編寫代碼如何優(yōu)雅地使用把標(biāo)簽放在結(jié)束標(biāo)簽之后結(jié)束標(biāo)簽之前的差別什么是響應(yīng)式設(shè)計(jì)怎樣進(jìn)行 書籍 《JavaScriptDOM編程藝術(shù)》《JavaScript高級(jí)程序設(shè)計(jì)》《JavaScript框架設(shè)計(jì)》《JavaScript專家編程》《JavaScript Ninjia》《JavaScript語言精粹（修訂版）》《JavaScript設(shè)計(jì)模式》《J...

    LiangJ 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<