成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

VS Code上手與超實用插件安利

miracledan / 2798人閱讀

摘要：軟件跨平臺支持以及，運行流暢，可謂是微軟的良心之作微軟有這個宇宙最強，自然也不會弱宇宙最強編輯器說到代碼編輯器，我們有必要提一提還有。

原文鏈接：VS Code上手與超實用插件安利

工欲善其事必先利其器

Visual Studio Code (簡稱 VS Code / VSC) 是一款免費開源的現(xiàn)代化輕量級代碼編輯器，支持幾乎所有主流的開發(fā)語言的語法高亮、智能代碼補全、自定義熱鍵、括號匹配、代碼片段、代碼對比 Diff、GIT 等特性，支持插件擴展，并針對網(wǎng)頁開發(fā)和云端應(yīng)用開發(fā)做了優(yōu)化。軟件跨平臺支持 Win、Mac 以及 Linux，運行流暢，可謂是微軟的良心之作

微軟有 Visual Studio這個宇宙最強IDE，Visual Studio Code 自然也不會弱(宇宙最強編輯器)

說到代碼編輯器，我們有必要提一提Sublime Text還有Atom。在開始使用VS Code之前Sublime Text一直是我的主力編輯器，和WebStorm （最強端前端開發(fā)工具） 一起用。由于這篇文章主要介紹VS Code下面就簡單概括下這幾個：

Sublime Text：在我的日常使用中都挺滿意，快速，穩(wěn)定。唯一不爽是證書購買(雖然可以一直無限制使用)，沒有開源

Atom：你們用著真不卡嗎？還是我電腦配置太差，不過UI真的好看

VS code：微軟開源，比sublime開源，比atom更快，比webstorm更輕，值得一提的是它用的殼是GitHub開源的Electron。

主要功能

Visual Studio Code首先是一個編輯器，它包含了高效的源代碼編輯所需的功能(最為一個編輯器，主要功能當然是代碼編輯了) 我們主要還是看看特色功能。

智能感知 Intellisense

智能感知是各種代碼編輯功能的總稱，包括代碼完成，參數(shù)信息，快速信息和成員列表。智能感知功能也被稱為“代碼補全”，“內(nèi)容幫助”和“代碼提示”，這是一個現(xiàn)代編輯器最基本的自我修養(yǎng)了。

VS Code原生就支持JavaScript，TypeScript，JSON，HTML，CSS，Less和Sass的Intellisense，真正的強大之處在于，可以安裝語言擴展來配置更豐富的IntelliSense（幾乎包括所有主流語言）

內(nèi)置 Git

VS Code 內(nèi)置了一個 Git GUI，支持最常用 Git 命令，這使得您可以很容易地看到您在項目中所做的更改。當然了，你可以通過擴展 讓他更強大。

調(diào)試 Debugging

VS Code對Node.js運行時提供了內(nèi)置的調(diào)試支持，并且可以調(diào)試JavaScript，TypeScript和任何其他被轉(zhuǎn)換為JavaScript的語言。對于調(diào)試其他語言和運行環(huán)境時，我們也可以通過擴展來解決。

終端命令行工具 Terminal

在VS Code中提供了一個功能齊全的集成終端，這非常方便，因為您不必切換窗口或更改現(xiàn)有終端的狀態(tài)就可以快速執(zhí)行命令

擴展市場 Extensio

對于強大的插件市場來說，它自帶的功能只是和開始而已。隨著VS Code的流行，基本上你能找到所有你想要的插件(實在找不到你還可以自己開發(fā))。

更多請查閱https://code.visualstudio.com/docs

開始上手

關(guān)于VS Code的使用也很簡單

下載安裝：去到它的官網(wǎng)https://code.visualstudio.com/，下載對應(yīng)版本，然后按照提示一直下一步就好

基本使用：在你安裝好后，就可以看到有用的用戶歡迎指引界面

你可以在學(xué)習(xí)欄點擊各項，迅速上手這個編輯器÷。下面主要就是推薦一些好用插件了，

插件安裝方式

關(guān)于插件的安裝，在看了界面概述后也應(yīng)該是知道怎么安裝了：

直接在擴展管理中鍵入你要下載的擴展名稱或者關(guān)鍵字搜索下載

使用快捷鍵?+?+P，打開命令面板，輸入如下命令即可

ext install 擴展名

還可以從插件主頁直接點擊下載，他會喚起VS Code自動下載

基本配置

關(guān)于VS Code的各項設(shè)置，都在一個JSON文件中，左邊是默認設(shè)置，右邊是我們自己的設(shè)置，分為用戶設(shè)置和工作區(qū)設(shè)置，我們只需要在右邊我們編輯設(shè)置并保存即可。工作區(qū)設(shè)置后各項設(shè)置會保存在.vscode文件夾下。

新安裝一個編輯/IDE，最先干的就是調(diào)字體(vscode 中可以直接按?加加號/減號調(diào)節(jié)字體)，調(diào)顏色等外觀配置了吧。

主題推薦

VS Code已經(jīng)自帶了很多個好看的主題，比如說我一直用的Solarized Dark

這里我再推薦幾個不錯的，

One Dark Pro： Atom 標志性的主題

Atom One Dark Theme： 另一個基于 One Dark 的主題

Dracula Official：超好看

Material Theme 一個簡單而又干凈的主題，有很多配置選項用于顏色配置

單單安裝了主題還不夠，我們還要好看的圖標來足視覺體驗：

vscode icons

Material Icon Theme

更多好看主題請瀏覽https://marketplace.visualstudio.com/search?target=VSCode&category=Themes

實用插件

filesize：在底部狀態(tài)欄顯示當前文件大小，點擊后還可以看到詳細創(chuàng)建、修改時間

Path Intellisense：文件路徑補全，在你用任何方式引入文件系統(tǒng)中的路徑時提供智能提示和自動完成

vscode-fileheader：頂部注釋模板，可定義作者、時間等信息，并會自動更新最后修改時間

Git Lens：查看詳細的git記錄,內(nèi)置功能很多

Git History (git log)：一個好用的Git 歷史查看工具

npm: 可以直接在vscode執(zhí)行npm的一些命令

Npm Intellisense：NPM 依賴補全，在你引入任何 node_modules 里面的依賴包時提供智能提示和自動完成

Debugger for Chrome：讓 vscode 映射 chrome 的 debug功能，靜態(tài)頁面都可以用 vscode 來打斷點調(diào)試

JavaScript (ES6) code snippets：常用的類聲明、ES 模塊聲明、CMD 模塊導(dǎo)入等

ESLint：代碼語法檢查

Beautify：格式化代碼的工具

open-in-browser： 在瀏覽器中預(yù)覽HTM文件

HTML Snippets：各種 HTML 標簽片段

IntelliSense for CSS class names：CSS 類名補全，會自動掃描整個項目里面的 CSS 類名并在你輸入類名時做智能提示

Document This： js 的注釋模板

Settings Sync：同步你得設(shè)置和插件

結(jié)語

我們從外觀配置開始到插件推薦結(jié)束，到此基本上你就能打造出一個有自己風(fēng)格強大編輯器，開發(fā)效率自然也是很高。你有什么好用的插件？歡迎留言交流！讓更多的人知道。

同時，建議移步官網(wǎng)看看https://code.visualstudio.com/，那兒有更全更細的文檔，有助于我們更好的使用它。

歡迎關(guān)注微信公眾號：

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/89991.html

相關(guān)文章

  • 架構(gòu)師之路

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

    NikoManiac 評論0 收藏0

  • 為什么我選擇使用 VS Code進行前端開發(fā)?

    摘要：我們團隊有大部分人已經(jīng)在用了，所以這周五在組內(nèi)做了一個小分享，來發(fā)掘一些提高開發(fā)效率的小技巧。為什么選擇在剛出來的時候，我就開始使用了如何評價理由很簡單開源，免費，顏值高微軟出品，實力保證。 showImg(https://segmentfault.com/img/remote/1460000010750652); 沒錯，我就是來給大家安利 VS Code 的。 對前端來說，這是一款性...

    liaosilzu2007 評論0 收藏0

  • 前端開發(fā) VS Code 上手使用

    摘要：如果想配置開發(fā)工具面向前端及開發(fā)人員的配置如果想配置開發(fā)工具配置及使用技巧所謂網(wǎng)紅編輯器，我覺得比來的更爽，因為的所有操作和插件，對于來說也就是一個插件就能無縫兼容。作為一個前端開發(fā)，開箱即用的代碼編輯高亮提示都十分友好。 如果想配置 sublime 開發(fā)工具 => 面向web前端及node開發(fā)人員的vim配置 如果想配置 vim 開發(fā)工具 => sublime配置及使用技巧 所謂網(wǎng)紅...

    Ocean 評論0 收藏0

  • vs code 插件折騰記（一）

    摘要：以下簡稱是微軟開發(fā)同時支持和系統(tǒng)且開放源代碼的代碼編輯器，并且是開源免費使用的，也是當下最受歡迎的代碼編輯器之一官網(wǎng)下載地址文章已更新插件折騰記二經(jīng)過我一段時間的使用，發(fā)現(xiàn)一些插件是必不可少的，現(xiàn)在給大家推薦一些非常實用的插件下載好安裝打開 Visual Studio Code（以下簡稱vs code） 是 微軟開發(fā)同時支持Windows、Linux、和macOS系統(tǒng)且開放源代碼的代碼...

    lidashuang 評論0 收藏0

  • vs code 插件折騰記（一）

    摘要：以下簡稱是微軟開發(fā)同時支持和系統(tǒng)且開放源代碼的代碼編輯器，并且是開源免費使用的，也是當下最受歡迎的代碼編輯器之一官網(wǎng)下載地址文章已更新插件折騰記二經(jīng)過我一段時間的使用，發(fā)現(xiàn)一些插件是必不可少的，現(xiàn)在給大家推薦一些非常實用的插件下載好安裝打開 Visual Studio Code（以下簡稱vs code） 是 微軟開發(fā)同時支持Windows、Linux、和macOS系統(tǒng)且開放源代碼的代碼...

    vslam 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<