整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
者介紹 | 梁桂釗——微微科技架構師
?
一、官方工具
IntelliJ IDEA 默認安裝并提供了非常多的工具，比如 Git Integration、Maven Integration、Markdown support、SSH Remote Run 等。其中有很多好用，但是不為人知的工具。
1. REST client
在日常開發過程中，我們或多或少都涉及到 API 接口的測試。例如，有的小伙伴使用 Chrome 的 Postman 插件，或者使用火狐的 restclient 等工具。事實上，這些工具是測試 API 接口非常有效的方式之一，筆者之前也一直使用 Postman 完成 API 接口的測試工作。今天，筆者推薦另外一個非常好用的小工具，能夠幫助讀者快速測試 API 接口。這個工具就是 IDEA 的 Editor REST Client。IDEA 的 Editor REST Client 在 IntelliJ IDEA 2017.3 版本就開始支持，在 2018.1 版本添加了很多的特性。事實上，它是 IntelliJ IDEA 的 HTTP Client 插件。詳細使用文檔，參考：http://blog.720ui.com/2018/restclient_use/
2. UML Support
如果需要研究源碼，內置 UML Support 插件可以很好地查看類繼承關系。詳細使用文檔，參考：https://www.jetbrains.com/help/idea/class-diagram.html
未完待續。。。
二、市場插件
1. 阿里代碼規約檢測
目前，插件檢測有兩種模式：實時檢測、手動觸發。詳細使用文檔，參考：https://github.com/alibaba/p3c/blob/master/idea-plugin/README_cn.md
此外，類似的插件還有 FindBugs 和 CheckStyle。
2. 快捷鍵提示工具：Key promoter X
Key Promoter X 是一個快捷鍵提示插件，如果鼠標操作是能夠用快捷鍵替代，Key Promoter X 會提示可以用什么快捷鍵替代。詳細使用文檔，參考：https://plugins.jetbrains.com/plugin/9792-key-promoter-x
3. 代碼注解插件：Lombok
lombok 的使用，參考 ：https://projectlombok.org/。我們需要在代碼中引入三方庫，然后安裝 lombok 插件即可。
<dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <version>最新版本號</version></dependency>
4. 代碼生成工具：CodeMaker
開發過程中，經常手工編寫重復代碼。現在，可以通過 CodeMaker 來定義 Velocity 模版來支持自定義代碼模板來生成代碼。目前，CodeMaker 自帶兩個模板。Model：根據當前類生成一個與其擁有類似屬性的類，用于自動生成持久類對應的領域類。Converter：該模板需要兩個類作為輸入的上下文，用于自動生成領域類與持久類的轉化類。
詳細使用文檔，參考：https://github.com/x-hansong/CodeMaker
5. 單元測試測試生成工具：JUnitGenerator
單元測試是必不可少的！我們可以使用 JUnitGenerator 插件來自動創建了單元測試。我們可以使用提供的 velocity 模板定制單元測試輸出代碼。如果在已經存在單元測試的地方創建了單元測試，則會提示用戶進行覆蓋或合并操作。合并操作允許用戶有選擇地創建目標文件內容。詳細使用文檔，參考：https://plugins.jetbrains.com/plugin/3064-junitgenerator-v2-0
6. Mybatis 工具：Free Mybatis plugin
現在，MyBatis 框架已占領半壁江山。因此，圍繞著 MyBatis 的插件和工具越來越多。Free Mybatis plugin 非常方便進行 Mapper 接口和 XML 文件之間跳轉。詳細使用文檔，參考：
https://plugins.jetbrains.com/plugin/8321-free-mybatis-plugin。此外，收費版的還有 Mybatis plugin。
對于 Mybatis 的工具還有很多，比如 mybatis-log-plugin、codehelper.generator。此外，非 IDEA的工具有：Mybatis 分頁插件 Mybatis-PageHelper、Mybatis 代碼生成工具 mybatis-generator 等。地址：http://www.mybatis.org/generator/
7. Maven輔助神器：Maven Helper
如果 Maven 引入的 jar 包有沖突，可以使用 Maven Helper 插件來幫助分析。詳細使用文檔，參考：https://plugins.jetbrains.com/plugin/7179-maven-helper
8. JSON轉領域對象工具：GsonFormat
在開發過程中，我們可能會遇到 json 格式的字符串轉換成實體類參數的場景，這個插件可以根據 JSONObject 格式的字符串，自動生成實體類參數。詳細使用文檔，參考：https://github.com/zzz40500/GsonFormat
那么，如何使用呢？我們可以使用 GsonFommat 的快捷鍵，默認 option + s (mac), alt + s (win) 通過以下方式修改快捷鍵。或者點擊工具欄的 Generate 來喚起生成工具。
9. 領域對象轉JSON工具：POJO to JSON
為了測試需要，我們需要將簡單 Java 領域對象轉成 JSON 字符串方便用 postman 或者 curl 模擬數據。詳細使用文檔，參考：https://plugins.jetbrains.com/plugin/9686-pojo-to-json
10. 時序圖生成工具：SequenceDiagram
有的時候，我們需要梳理業務邏輯或者閱讀源碼。從中，我們需要了解整個調用鏈路，反向生成 UML 的時序圖是強需求。其中，SequenceDiagram 插件是一個非常棒的插件。詳細使用文檔，參考：https://plugins.jetbrains.com/plugin/8286-sequencediagram
11. 字符串工具：String Manipulation
String Manipulation 插件提供了非常豐富字符串工具，例如命名替換（ (camelCase, kebab-lowercase, KEBAB-UPPERCASE, snakecase, SCREAMINGSNAKE_CASE, dot.case, words lowercase, Words Capitalized, PascalCase）等。
詳細使用文檔，參考：https://plugins.jetbrains.com/plugin/2162-string-manipulation
12. 代碼作色工具：Rainbow Brackets
Rainbow Brackets 插件可以實現配對括號相同顏色，并且實現選中區域代碼高亮的功能。
詳細使用文檔，參考：https://plugins.jetbrains.com/plugin/10080-rainbow-brackets
事實上，代碼作色之后，可以非常方便我們閱讀。類似的工具還有：Grep Console 來自定義設置控制臺輸出顏色等。
13. RESTful 服務開發輔助工具集: RestfulToolkit
開發中，經過會根據 URI 的部分信息來查找對應的 Controller 中方法，RestfulToolkit 提供了一套 RESTful 服務開發輔助工具集，提供了如下功能：
根據 URL 直接跳轉到對應的方法定義 ( Ctrl \ or Ctrl Alt N ); 提供了一個 Services tree 的顯示窗口; 一個簡單的 http 請求工具; 在請求方法上添加了有用功能: 復制生成 URL;,復制方法參數... 其他功能: java 類上添加 Convert to JSON 功能，格式化 json 數據 ( Windows: Ctrl + Enter; Mac: Command + Enter )。
詳細使用文檔，參考：https://plugins.jetbrains.com/plugin/10292-restfultoolkit
14. 日志工具：Grep Console
參考：https://plugins.jetbrains.com/plugin/7125-grep-console
不同級別日志通過顏色區分，一路了然
高亮日志
便捷檢索日志
15. 生成對象set方法：GenerateAllSetter
開發中，有時可以通過BeanUtil等工具類進行對象之間的屬性拷貝，但有時候也需要手工進行賦值。通過GenerateAllSetter，可以一鍵生成對象的所有set語句。
16. Redis可視化：Iedis
參考：https://plugins.jetbrains.com/plugin/9228-iedis
使用參考：https://codesmagic.com/iedis/userguide/getting-started 可方便的執行增刪查改及使用命令行進行操作。
17. K8s工具：Kubernetes
參考 https://plugins.jetbrains.com/plugin/10485-kubernetes 支持編輯 Kubernetes 資源文件，如下：可以比較方便的查看yaml中的各項 placeholder 的默認值，且可以方便的鏈接到value位置。
18. 中英文翻譯工具：Translation
最騷的操作是什么？一位小伙伴說過：說到了變量命名，先用中文寫好，然后用 Translation 插件的 translate and replace 一鍵替換為英文，這樣效率高而且準確。詳細使用文檔，參考：https://plugins.jetbrains.com/plugin/8579-translation
isual Studio Code是由微軟公司推出的一款免費、開源的代碼編輯器，一經推出便受到開發者的歡迎。對于Web前端開發人員，一個強大的編輯器可以使開發變得簡單、便捷、高效。VS Code提供了非常豐富的插件功能，根據你的需要，安裝對應的插件可以大大提高開發效率。
1、Chinese (Simplified) Language Pack
適用于 VS Code 的中文(簡體)語言包
2、Code Spell Checker
拼寫檢查器。比如 banana 單詞寫錯成 banane ，會提示你是否修改成 banana ，也可以將 banane 添加至檢查器的字典中。
3、HTML CSS Support
在編寫樣式表的時候，自動補全功能大大縮減了編寫時間。
4、JavaScript (ES6) code snippets
支持ES6語法提示
5、Mithril Emmet
一個能大幅度提高前端開發效率的一個工具，用于補全代碼
6、Path Intellisense
路徑提示插件
7、Vue 3 Snippets
在 Vue 2 或者 Vue 3 開發中提供代碼片段，語法高亮和格式化的 VS Code 插件，能極大提高你的開發效率。
8、VueHelper
vscode最好的vue代碼提示插件，不僅包括了vue2所有api，還含有vue-router2和vuex2的代碼。
9、Auto Close Tag
自動閉合HTML/XML標簽
10、Auto Rename Tag
自動完成另一側標簽的同步修改
11、Beautify
格式化 html ,js,css
安裝過程中, 如果提示是否需要繼續安裝, 選擇 "仍要安裝"。
12、Bracket Pair Colorizer
給括號加上不同的顏色，便于區分不同的區塊，使用者可以定義不同括號類型和不同顏色。
安裝過程中, 如果提示是否需要繼續安裝, 選擇 "仍要安裝"。
13、open in browser
vscode不像IDE一樣能夠直接在瀏覽器中打開html，而該插件支持快捷鍵與鼠標右鍵快速在瀏覽器中打開html文件，支持自定義打開指定的瀏覽器，包括：Firefox，Chrome，Opera，IE以及Safari
14、Vetur
Vue多功能集成插件，包括：語法高亮，智能提示，emmet，錯誤提示，格式化，自動補全，debugger。vscode官方欽定Vue插件，Vue開發者必備。
15、File Utils
File Utils插件,可以方便快捷的來創建、復制、移動、重命名文件和目錄。
16、IntelliJ IDEA Keybindings
安裝VSCode的插件 IntelliJ IDEA Keybindings 即可在VSCode中使用IDEA的快捷鍵。
VSCode中，有許多與HTML相關的插件可以大大提高開發效率和便利性。以下是一些值得推薦的插件，它們各自具有獨特的功能和優點，可以幫助您更好地編寫、調試和預覽HTML代碼。
1. HTML Snippets: 這個插件提供了許多HTML代碼片段，可以幫助您快速編寫常見的HTML結構和元素。只需輸入簡短的縮寫，即可自動生成相應的HTML代碼，大大提高了編寫速度。
2. Emmet: Emmet是一個強大的代碼生成器，支持多種編程語言，包括HTML。通過簡單的縮寫和語法，您可以快速生成復雜的HTML結構和嵌套元素。Emmet還提供了許多自定義選項，可以根據您的需求進行靈活配置。
3. HTML Boilerplate: 這個插件提供了一個HTML模板，包含了常見的HTML結構和元素，如文檔類型聲明、字符編碼、頭部信息等。使用這個插件，您可以快速創建一個基本的HTML框架，然后在此基礎上進行進一步的開發。
4. HTML Preview: HTML Preview插件可以在VSCode中實時預覽HTML代碼的效果。您只需在編輯器中打開HTML文件，然后點擊預覽按鈕，即可在側邊欄中查看HTML頁面的渲染效果。這對于調試和預覽HTML代碼非常方便。
5. Color Highlight: Color Highlight插件可以自動識別HTML代碼中的顏色值，并在編輯器中高亮顯示。這使得您更容易發現和修改顏色值，提高了代碼的可讀性和可維護性。
6. HTML Boilerplate Generator: 這個插件可以幫助您快速生成HTML5的Boilerplate代碼，包括常用的meta標簽、字符編碼、視口設置等。它還提供了一些自定義選項，可以根據您的需求生成符合規范的HTML代碼。
7. HTML CSS Support: 這個插件提供了對HTML和CSS的完整支持，包括語法高亮、代碼片段、代碼折疊等功能。它還支持自動完成和錯誤檢查，可以幫助您更高效地編寫HTML和CSS代碼。
8. HTML/CSS/JS Prettify: 這個插件可以對HTML、CSS和JavaScript代碼進行格式化，使其更加整潔和易讀。您可以自定義格式化規則，也可以使用默認的規則進行快速格式化。這對于保持代碼風格一致和提高代碼可讀性非常有幫助。
9. HTML Validator: HTML Validator插件可以對HTML代碼進行驗證，檢查其是否符合W3C規范。它可以檢測出潛在的錯誤和不符合規范的地方，并給出相應的提示和建議。這對于編寫符合標準的HTML代碼非常有幫助。
10. Live Server: Live Server插件可以在本地啟動一個實時服務器，讓您在瀏覽器中實時預覽HTML、CSS和JavaScript代碼的效果。它支持自動刷新和熱更新，可以實時反映代碼的變化。這對于前端開發和調試非常方便。
以上是一些值得推薦的VSCode中與HTML相關的插件。它們各自具有獨特的功能和優點，可以幫助您提高開發效率和便利性。當然，具體選擇哪些插件還需要根據您的實際需求和喜好來決定。希望這些推薦能對您有所幫助！
?
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
