VsCode

我選擇的開發(fā)工具是VsCode，別問為什么，問就是好用。

常用開發(fā)工具

1. Visual Studio Code

功能簡介：

Visual Studio Code 中文版是微軟推出的帶 GUI 的代碼編輯器，軟件功能非常強大，界面簡潔明晰、操作方便快捷，設計得很人性化。軟件主要改進了文檔視圖，完善了對 Markdown的支持，新增 PHP 語法高亮。

2. HBuilder

功能簡介：

HBuilder 是專為前端打造的開發(fā)工具，具有飛一樣的編碼、最全的語法庫和瀏覽器兼容數(shù)據(jù)、可以方便的制作手機 APP、最保護眼睛的綠柔設計等特點。支持HTML、CSS、JS、PHP的快速開發(fā)。從開放注冊以來深受廣大前端朋友們的喜愛。

3. Sublime Text

功能簡介：

Sublime Text 是一個代碼編輯器也是 HTML 和散文先進的文本編輯器。漂亮的用戶界面和非凡的功能，例如迷你地圖，多選擇，Python的插件，代碼段，等等。完全可自定義鍵綁定，菜單和工具欄。Sublime Text 的主要功能包括：拼寫檢查，書簽，完整的Python API，Goto功能，即時項目切換，多選擇，多窗口等等。

4. WebStorm

功能簡介：

WebStorm 是 jetbrains 公司旗下一款JavaScript開發(fā)工具。目前已經(jīng)被廣大中國 JS 開發(fā)者譽為“Web 前端開發(fā)神器”、“最強大的HTML5編輯器”、“最智能的 JavaScript IDE”等。與 IntelliJ IDEA 同源，繼承了 IntelliJ IDEA 強大的 JS 部分的功能。

5. Atom

功能簡介：

ATOM，是一個現(xiàn)代的文本編輯器,平易近人,但可刪節(jié)的核心工具定制做任何事,也可以使用有效不沾一個配置文件。

VsCode 安裝（windows）

1. 下載

vscode 支持 Windows、Linux、MAC 三大主流操作系統(tǒng)，點擊進入下載安裝包

2. VsCode 漢化

打開 VsCode,點擊左邊的拓展按鈕，在彈出的側邊欄搜索框輸入chinese，安裝Chinese (Simplified) Language Pack for Visual Studio Code。按Ctrl+shift+P快捷鍵彈出命令行，選擇"Configure Display Language"，選擇zh-cn。重啟一下 vscode 就可以看看效果了。

VsCode 必備插件

1. open in browser

在瀏覽器中打開，安裝后在左側目錄中右鍵點擊會出現(xiàn) open in browser 選項。

2. Auto Rename Tag

自動重命名配對的 HTML / XML 標簽

3. Color-Highlight

在編輯器中高亮顯示顏色。

4. Color Picker

代碼的顏色選擇器。

5. HTML CSS support

css 自動補齊

6. HTML Snippets

支持 HTML5 標簽提示

7. JavaScript (ES6) snippets

支持 JavaScript ES6 語法

8. jQuery Code Snippets

jq 代碼段提示。

9. Npm Intellisense

在 import 語句中自動完成 npm 模塊引入的代碼插件。

10. Path Intellisense

文件路徑提示。

11. VS Code CSS Comments

css 代碼注釋。

12. vscode-browser-plugin

在編輯器內(nèi)預覽 HTML，通過開啟端口(3000)監(jiān)聽當前打開項目的根目錄，在編輯器內(nèi)預覽網(wǎng)站，省去了頻繁切換瀏覽器、編輯器看頁面效果，修改代碼后自動刷新頁面。

13. vscode-icons

文件圖標。

14. Vue 2 Snippets

vue 代碼提示，高亮。

?>（使用其他框架，直接搜就好，像是 react，angular，就會出現(xiàn)相關的代碼提示和語法支持常用插件）

15. Markdown All in One

Markdown插件，可輕松轉換為HTML文件和PDF文件

16.ESLint

ESlint：是用來統(tǒng)一JavaScript代碼風格的工具，不包含css、html等。

17. Prettify JSON

json 格式化插件

18. Bracket Pair Colorizer

括號顏色高亮

19. One Dark Pro

目前使用人數(shù)最多的主題

20. KoroFileHeader

VsCode 自動生成文件頭部注釋和函數(shù)注釋

"fileheader.customMade": {
    "Description": "",
    "Author": "jszero",
    "Date": "Do not edit",
    "LastEditTime": "Do not edit",
    "LastEditors": "jszero"
    },

21. GitLens — Git supercharged

GitLens能增強Visual Studio代碼中內(nèi)置的Git功能。它幫助您通過Git blame注解和代碼鏡頭直觀地顯示代碼作者，無縫地導航和探索Git存儲庫，通過強大的比較命令獲得有價值的見解。

22. Setting Sync

Settings Sync可以同步你當前的VSCode配置環(huán)境，當你需要在其它的電腦工作時，您不用重頭再來一遍。新機器登錄一下就搞定了。再也不用折騰環(huán)境了。

大致原理：使用GitHub Gist來同步多臺計算機上的設置，代碼段，主題，文件圖標，啟動，鍵綁定，工作區(qū)和擴展。

23. REST Client

Rest Client 擴展可以幫助您使用其他第三方工具和 API。如果您需要能夠輕松地發(fā)出 HTTP 請求，那么它非常有用。

這個擴展允許您輕松地在代碼編輯器中直接調(diào)用和 API 端點。這樣可以節(jié)省時間ーー 你可以使用這個選項，而不必在瀏覽器或 Postman 那里來回地切換請求。

24. NPM

每個現(xiàn)代開發(fā)人員都已經(jīng)知道 NPM 是什么以及為什么它很重要。Node Package Manager 是一個擴展，可以幫助您管理 Package.json 文件。如果有依賴項需要但尚未安裝，它會給出警告，還有 NPM 包的版本控制。

我一直致力于解決的大多數(shù)錯誤和錯誤都來自于使用 NPM 包、函數(shù)和特性，由于它與其他包不兼容，這些都無法正常工作。

這個 VSCode 擴展是必須的

25. Browser Preview

在用 VS Code 做前端開發(fā)時，你也許會用 Live Server 或者 Debugger for Chrome 插件，來打開 Chrome 瀏覽器進行預覽和調(diào)試。你也許會有這樣的痛苦，特別是在只有一個屏幕時，你需要在屏幕的兩側進行位置調(diào)整，分別打開 VS Code 和 Chrome。不過現(xiàn)在，Browser Preview 插件完全解決了這個問題。

26. Image preview

懸停時顯示圖像預覽。

解決vetur和eslint的沖突

首選項 -> 設置 -> 在setings.json 中編輯

此處奉上本人的vscode設置，可根據(jù)根據(jù)個人習慣更改

{
    "git.enableSmartCommit": true,
    "workbench.iconTheme": "vscode-icons",
    "window.zoomLevel": -1,
    "editor.fontSize": 16,
    // 制表鍵空格數(shù)
    "editor.tabSize": 2,
    // tab鍵自動補全代碼
    "editor.tabCompletion": "on",
    // eslint 在編輯中展示eslint狀態(tài)
    "eslint.alwaysShowStatus": true,
    // eslint 保存的時候?qū)⒋a按eslint格式進行修復
    "eslint.autoFixOnSave": true,
     // vetur插件的格式化程序
    "vetur.format.defaultFormatter.ts": "prettier-tslint",
     // eslint 添加 vue 支持
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    //  #去掉代碼結尾的分號 
    "prettier.semi": false,
    //  #使用帶引號替代雙引號 
    "prettier.singleQuote": true,
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    // vetur 格式化文件的程序
    "vetur.format.defaultFormatter.js": "prettier-eslint",
    "fileheader.customMade": {
    "Description": "",
    "Author": "jszero",
    "Date": "Do not edit",
    "LastEditTime": "Do not edit",
    "LastEditors": "jszero"
    },
}