強力推薦提高開發效率 VSCode 的插件!

2020-12-17 jiegiser

現在大部分做前端開發，基本都在使用 vscode 吧；這裡推薦一下我常用的提高工作效率的插件。

主題

1. Dracula Official

個人最喜歡的主題，應該是最好看的主題之一。

2. Eva Theme

裡面包含黑色和白色主題，個人覺得白色主題感覺挺好看的；

3. GlassIt-VSC（毛玻璃透明效果）

可以上班看學習視頻（偷笑）；

4. One Dark Pro

比較好看的主題。

代碼片段

1. JavaScript (ES6) code snippets

主要是 ES6 的代碼片段，很實用。

2. JavaScript Snippet Pack

ES5及以下的代碼片段，實用。

3. jQuery Code Snippets

jQuery 代碼片段

4. HTML Snippets

版本管理

1. Git History

以圖表的形式查看git日誌；使用 command+shift+p（Ctrl+shift+p） 輸入git log就可以看到了

2. Git Lens

git 日誌插件；

語法校驗

1. stylelint

一個 css 代碼規範比內置的要全，更智能；

2. ESLint

EsLint 可以幫助我們檢查 Javascript 編程時的語法錯誤。比如：在 Javascript 應用中，你很難找到你漏洩的變量或者方法。EsLint 能夠幫助我們分析 JS 代碼，找到bug 並確保一定程度的 JS 語法書寫的正確性。

3. markdownlint

markdown 語法檢查；

4. TSLint

檢查typescript編程時的語法錯誤語法；

5. htmlhint

Vue 相關

1. vetur

語法高亮、智能感知；

2. vue-peek

轉到定義,這個插件就是讓 vue 也支持這個功能,實用!

3. Vue VSCode Snippets

vue 代碼片段；

4. Vue TypeScript Snippets

vue的 typescript 代碼片段

React 相關

1. React-Native/React/Redux snippets for es6/es7

React 的代碼片段，下載量超多。

其他工具

1. Prettier

格式化JavaScript / TypeScript / CSS 。

2. Import Cost

當使用 import 一個庫的時候,可以計算改引入模塊的大小；

相關焦點

  • vscode常用插件推薦
    通用插件Chinese: 使vscode顯示為中文One Dark Pro: 一個非常好看的主題插件SettingsSync：同步vscode設置和插件的插件，僅需登錄GitHub選擇gist即可使用Alt+Shift+D下載，Alt+Shift+U上傳。
  • 雲開發 VSCode 插件 Cloudbase Toolkit 的正確打開方式
    什麼是 Cloudbase ToolkitTencent CloudBase Toolkit 是雲開發的 VS Code（Visual Studio Code）插件。該插件可以讓您更好地在本地進行雲開發項目開發和代碼調試，並且輕鬆將項目部署到雲端。
  • vscode插件體系詳解
    事實上很多 vscode 的核心功能也是通過插件實現的。本文我們將從以下三個方面詳述 vscode 的插件機制：閱讀本文後續內容，需要對 vscode 的插件開發有基本的了解。關於 vscode 的插件開發可參考 vscode 的官方教程 。1.
  • 2019年JavaScript開發者必備的10個vscode插件
    VSCode現在前端圈特別火爆，基本人手一件，那麼選擇一個好的插件能夠幫我們提高開發效率，和開發體驗。今天給大家推薦的這個10個插件希望對大家有所幫助。之前我們還熱衷使用Atom,webstorm,在前兩年的時候改用了vscode,感覺非常好，性能也不錯。而且vscode的社區和市場也日漸強大，這也是我選擇vscode的原因之一。
  • 編程開發工具vscode插件整理
    Auto Import import提示 Auto Rename T ag 修改HTML 標籤時 , 自動修改匹配的標籤 Airbnb react snippets react 編碼規範 AutoFileName 自動補全文字名 Babel JavaScript babel 插件
  • 誰會不愛讓代碼騷裡騷氣的VSCode擴展插件呢?
    VS Code是筆者最喜歡的文本編輯器，它受眾廣泛，可用插件眾多，簡直棒呆。所以今天，筆者打算寫一寫自己用過的VS Code擴展插件，它們不僅能提高你的生產力，還能讓你寫出騷裡騷氣的代碼。　　本文分為兩部分介紹，一是提高生產力的擴展插件，二是編程格式擴展插件。既然一會兒要談到格式，先讓大家看看筆者的VS Code長什麼樣：
  • HBuilderX 2.7.x 發布,插件系統開放,C++ 版的 vscode 來了
    重大升級：插件系統開放HBuilderX自發布以來，目前已累計500萬+的開發者在使用，不少開發者在呼籲HBuilderX開放插件系統，想共同參與打造更好的開發工具。 所以從2.7+起，我們正式開放HBuilderX插件系統。
  • vscode入門:熟悉vscode和初級配置
    提高效率需要藉助於合適的工具，更需要自己熟練使用，積累久了便可自成體系風格。登錄vscode官網，下載對應平臺的安裝包安裝即可，下載安裝的過程中可以了解一下release notes，看看官方文檔。默認是英文界面，可以修改成中文（初期為了熟悉工具，最好使用熟悉的語言，英語大神可以跳過這一步）。點擊界面左下角的設置按鈕，選擇最上面的Command Palette...
  • 2020 vscode 好用的十佳擴展
    vscode作為免費開源的文本編輯器，它已經越來越受開發者喜愛。因為豐富的插件，它可以媲美IDE，同時它還有著不俗的啟動速度，可以說它是一款披著文本編輯器的IDE一點也不為過。vscode有著無數的插件，今天我們就來盤點一下2020年vscode相對來說非常好用的十佳擴展。Import Cost在開發過程中，我們可能經常會發現自己在項目中添加了依賴項。儘管模塊化開發已成為當今軟體開發的關鍵部分，但最好還是確保對依賴的過度依賴。
  • 使用代碼片段的正確姿勢,打造高效的vscode開發環境
    為了能夠減少以上重複工作，提高效率，我也嘗試過不少辦法製作項目模板，使用vue init 來初始化項目使用 github gist在vscode 中使用code snippet但以上的解決方案或多或少有些問題，長期使用感覺不現實製作項目模板的話，需要挺大的啟動決心的，並且投入大，見效慢，如果需要普適項目需要花大力氣抽象
  • SAST Weekly | vscode 插件PlatformIO簡介
    但是，在隨著電設開發的進行，代碼量指數上升，這些我們熟知的IDE的問題也愈加明顯。我們習慣了vscode舒適的編程環境，面對蒼白的界面不禁感慨人世的艱辛。誒，代碼補全功能沒有嗎？誒，我的代碼高亮去哪了？    誒，我的頭髮呢？    這些看似細微的功能的缺失直接影響著開發者的開發體驗。
  • 那些你應該考慮卸載的 VSCode 擴展
    ，github 倉庫 都已經被封存了，推薦國人開發的替代品：vscode-svg2。其它一些不推薦使用的擴展TSLint如果你還不知道 tslint 去年年初就被廢棄了，並且現在是以插件的形式被集成到 ESLint 了，那你可能是個假前端。
  • 眾所周知,擁有了vscode就擁有了一切
    常規用法vscode 寫代碼支持各種流行的程式語言，包括c++, Java, js等等。通過相應的插件你甚至能夠對它們進行編澤運行。Drawio -流程圖製作使用此插件之後，你可以在vscode上直接進行各種流程圖的繪製，支技導出成圖片，可以說是工作必備。
  • 10個幫助你提高效率的VSCode插件
    它們將幫助你提高生產率，並在更短的時間內完成更多的更改。我選擇在此處列出的擴展名適用於所有類型的項目。我不想在針對特定設置的列表中包括插件。例如GraphQL或Svelte的擴展。現在，讓我們跳到第一個。1、Material Icon Theme我想從主題開始。
  • 推薦10款效率可以翻倍的IDEA插件,擼碼利器
    前言Idea作為我們日常使用的編輯工具之一，因其強大和人性化而被各大神推薦。筆者閒來無事學了下Idea的操作，在找插件的過程中發現了一些寶藏插件，對我們日常開發或者提升代碼功力都挺有幫助的吧，特此選出十個來推薦給大家~10.
  • 推薦30 種提高工作效率的利器
    我一直都在不斷挑選和優化自己的兵器，以追求著最高效率。此篇分享下我的私家珍藏的各種神兵利器。如果有朋友能推薦更好的，那就不枉此篇。分為Windows軟體和開發工具兩類。一開始從用altrun 然後試過Listary ，發現WOX 後，最為順手，效率提升100%。
  • 增加這幾款VS Code插件,工作效率提升一大截
    VS Code 有一個很強大的功能就是支持插件擴展。每個人安裝這個軟體都會用到插件，比如它識別不了Vue文件，識別不了React文件，這時候我們必須要藉助插件。GitLens我強烈建議你安裝插件GitLens，它是 VS Code 中我最推薦的一個插件，簡直是Git神器，碼農必備。如果你不知道，那真是out了。GitLens 在 Git 管理上有很多強大的功能，比如：將光標放置在代碼的當前行，可以看到這樣代碼的提交者是誰，以及提交時間。
  • 分享幾個我日常使用的VS Code插件
    我不想再錯過這個插件了，強烈推薦！連結：https://github.com/ChristianKohler/NpmIntellisenseMarketplace：https://marketplace.visualstudio.com/items?
  • 超另類:在vscode下實現編譯仿真下載,你絕對想不到
    這個教程將介紹下如何在vscode下實現這些操作，真正實現一個vscode可以吃天、實現編譯仿真下載一條龍服務，而你只需要在vscode下的終端敲幾個命令而已。。。本教程以阿波羅開發板stm32f429igt6為例，先瞅瞅最終界面最終可以用的功能如下：1，vscode終端下執行make指令，即可在build文件下編譯出.hex .bin .elf文件，中間文件放在build/Obj/文件夾下2，執行make clean，可清除build文件夾3，執行make download，可一鍵下載hex
  • Chrome(谷歌)瀏覽器使用必備的15款神級插件提高你的工作效率
    給大家推薦15款非常好用的谷歌Chrome插件，如果熟練使用這些插件可以極大地提高工作和學習的效率。Tampermonkey主要功能有：方便的腳本管理、腳本概覽、設置多樣性、腳本自動更新、安全、兼容性、Chrome 同步、CodeMirror 編輯器、JSHint 語法檢查、快速開發、卸載等。你可以通過添加對應的腳本，比如去除廣告、轉換閱讀模式或者下載網盤文件等等，這樣你就不用再安裝其它插件了。