資訊專欄INFORMATION COLUMN
摘要：我們團(tuán)隊(duì)有大部分人已經(jīng)在用了，所以這周五在組內(nèi)做了一個(gè)小分享，來發(fā)掘一些提高開發(fā)效率的小技巧。為什么選擇在剛出來的時(shí)候，我就開始使用了如何評(píng)價(jià)理由很簡單開源，免費(fèi)，顏值高微軟出品，實(shí)力保證。
沒錯(cuò)，我就是來給大家安利 VS Code 的。
對(duì)前端來說，這是一款性感無比的 IDE，哦不對(duì)應(yīng)該是編輯器。我們團(tuán)隊(duì)有大部分人已經(jīng)在用了，所以這周五在組內(nèi)做了一個(gè) VS Code 小分享，來發(fā)掘 VSC 一些提高開發(fā)效率的小技巧。我相信已經(jīng)有不少前端在使用它了，所以大家更有必要一起分享下日常神操作了。
為什么選擇 VS Code ？在 VSC 剛出來的時(shí)候，我就開始使用了（如何評(píng)價(jià) Visual Studio Code？),理由很簡單：
開源，免費(fèi)，顏值高；
微軟出品，實(shí)力保證。
然而用了一陣發(fā)現(xiàn)還是 Sublime 好用，一是剛出來功能不完善，Sublime 一些技巧無法遷移過來，另外就是插件太少，實(shí)際開發(fā)略顯吃力。然隨著后面 VSC 一次次更新，不少新 features 著實(shí)讓人眼前一亮：微軟這是在用心做產(chǎn)品吶！以至于現(xiàn)在已經(jīng)沒有什么可以抱怨的了(有趣的是當(dāng)天尤大也發(fā)微博說轉(zhuǎn)投 VSC 了，可以預(yù)見這款產(chǎn)品未來會(huì)越做越好，方向選對(duì)了，就不怕路走錯(cuò))。
而作為前端，VSC 簡直就是為我們量身定制：
VSC 本身是基于當(dāng)前大火的 TS 來寫的，所以對(duì)于 TS 的支持自然很好；又是基于 electron 開發(fā)，底層 Node.js 對(duì)前端來說再熟悉不過了。所以，如果你發(fā)現(xiàn)哪里不好用，你可以自己寫插件吶！如果一個(gè)滿足不了，那就寫兩個(gè)。
而對(duì)于 VSC 的擴(kuò)展開發(fā)也是相當(dāng)友好，你只需要5步：
申請(qǐng)一個(gè) Visual Studio Team Services Account；
添加一個(gè) Personal access token;
創(chuàng)建一個(gè)發(fā)布賬號(hào)，用來發(fā)布你的擴(kuò)展即可(以上操作完全免費(fèi))；
使用 VSC 的 Yeoman 腳手架初始化你的擴(kuò)展項(xiàng)目，之后就是調(diào)用官方提供的 API 開發(fā)你的擴(kuò)展即可，就跟開發(fā) Chrome 插件一樣；
使用官方發(fā)布工具vsce來發(fā)布你的擴(kuò)展到擴(kuò)展市場(chǎng)，之后別人就可以搜到你的擴(kuò)展啦！
所以對(duì)于前端來說，都是我們熟悉的技術(shù)棧，你可以作為一個(gè)使用者，也可以轉(zhuǎn)身變成一個(gè)開發(fā)貢獻(xiàn)者！
而對(duì)于 Sublime 和 WebStorm 來說就沒有這么方便了，當(dāng)然你也可以用 Python 或者 Java 來貢獻(xiàn)插件，不過對(duì)于前端還是稍稍有些門檻。如果僅僅是使用的話，WebStrom 確實(shí)也很好用，畢竟人家收了錢，而且你最好買一個(gè)高配的電腦，否則代碼擼多了，會(huì)卡到你懷疑人生。
一些實(shí)用擴(kuò)展和技巧這才是重點(diǎn)。先貢獻(xiàn)下自己的部分?jǐn)U展列表：
各位要是有啥好用的擴(kuò)展也分享一下吶，大家一起 get 新姿勢(shì)！(有趣的是新版的 VSC在擴(kuò)展欄增加了推薦欄，這樣大家能更方便的發(fā)現(xiàn)一些精品）
強(qiáng)烈推薦的幾個(gè)插件：
Complete JSDoc Tags(好的注釋不僅對(duì)項(xiàng)目有用，對(duì) VSC 的代碼智能感知也很有用)
Dash(如果你購買了 Dash App 的話）
EditorConfig for VS Code（統(tǒng)一的編輯配置對(duì)團(tuán)隊(duì)開發(fā)很有用）
ESLint（讓 VSC 內(nèi)置 ESLint）
Git History（裝完輸入 git log有驚喜)
Git Lens（讓本就集成了 git 的 VSC 更加強(qiáng)大）
Path Intellisense(文件路徑感知擴(kuò)展）
Project Manager(多項(xiàng)目管理神器)
Settings Sync(將你所有的編輯器配置同步到 gist，省得在新設(shè)備上重新?lián)v鼓)
詳細(xì)的介紹我就懶得寫了，大家自己去探索發(fā)現(xiàn)吧，一些有用的資源：
官方文檔 永遠(yuǎn)是最有用的，或者你也可以選擇中文翻譯版；
這里列出了更多好玩的插件awesome-vscode;
一些小技巧：
每次更新 VSC 后，好好看下更新日志，有驚喜；
有事沒事逛逛擴(kuò)展市場(chǎng)，有驚喜；
有時(shí)間仔細(xì)看看官方文檔，有驚喜；
好好研究下控制面板和快捷鍵，你會(huì)發(fā)現(xiàn)很多命令不用記；
VSC 本身是默認(rèn) git 工作流的，基于 git 項(xiàng)目進(jìn)行開發(fā)體驗(yàn)更佳，不要讓自己的工作區(qū)處于非 git repo 文件夾。
總結(jié)不管你以前是用 Sublime 還是 WebStorm，又或者是 Atom 和 Eclipse，現(xiàn)在遷移到 VS Code 都是灰常方便的：
最后，我為什么要安利 VS Code？
畢竟用的人越多，插件市場(chǎng)越豐富，解決問題更快捷，交流起來更愉快嘛！
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.hztianpu.com/yun/87360.html
摘要：在對(duì)比我最近幾個(gè)月所用的開發(fā)工具后，我發(fā)現(xiàn)了一些驚人的東西。永遠(yuǎn)不停止使用。將警告未使用的代碼。預(yù)檢查使用，，和非常有用。不再需要使用開啟服務(wù)器，創(chuàng)建應(yīng)用程序，并打開瀏覽器。嘗試使用別的東西，立即出現(xiàn)錯(cuò)誤。 原文：Supercharging Frontend Development with VS Code 作者：zachcodes 過去幾天，為了在開發(fā) GraphQL / Rea...
摘要：接下來的內(nèi)容將從以下幾方面進(jìn)行展開調(diào)試前端代碼調(diào)試通過啟動(dòng)的服務(wù)器要使用的調(diào)試功能，首先就得配置文件。調(diào)試前端代碼通過調(diào)試前端代碼主要依賴于一個(gè)插件，該插件主要利用所開放出來的接口來實(shí)現(xiàn)對(duì)其渲染的頁面進(jìn)行調(diào)試。 本文最初發(fā)布于我的個(gè)人博客：咀嚼之味 Visual Studio Code (以下簡稱 vscode) 如今已經(jīng)代替 Sublime，成為前端工程師們最喜愛的代碼編輯器。它作為...
摘要：如果想配置開發(fā)工具面向前端及開發(fā)人員的配置如果想配置開發(fā)工具配置及使用技巧所謂網(wǎng)紅編輯器，我覺得比來的更爽，因?yàn)榈乃胁僮骱筒寮?，?duì)于來說也就是一個(gè)插件就能無縫兼容。作為一個(gè)前端開發(fā)，開箱即用的代碼編輯高亮提示都十分友好。 如果想配置 sublime 開發(fā)工具 => 面向web前端及node開發(fā)人員的vim配置 如果想配置 vim 開發(fā)工具 => sublime配置及使用技巧 所謂網(wǎng)紅...
摘要：摘要你所不知道的系列。允許你寫入縮寫代碼并返回的相應(yīng)標(biāo)記，目前已經(jīng)內(nèi)置，所以不用配置了。自從年雙十一正式上線，累計(jì)處理了億錯(cuò)誤事件，付費(fèi)客戶有金山軟件百姓網(wǎng)等眾多品牌企業(yè)。摘要： 你所不知道的系列。 原文：提高 JavaScript 開發(fā)效率的高級(jí) VSCode 擴(kuò)展之二！ 作者：前端小智 Fundebug經(jīng)授權(quán)轉(zhuǎn)載，版權(quán)歸原作者所有。 作為一名業(yè)余愛好者、專業(yè)人員，甚至是每月只有一次編...
閱讀 3571·2021-11-25 09:43
閱讀 2459·2021-09-06 15:02
閱讀 3632·2021-08-18 10:21
閱讀 3446·2019-08-30 15:55
閱讀 2436·2019-08-29 17:06
閱讀 3611·2019-08-29 16:59
閱讀 1047·2019-08-29 13:47
閱讀 2927·2019-08-26 13:24
