Visual Studio Code (VS Code)安裝及配置

一、安裝

• 下載地址：https://code.visualstudio.com/

  ?> VS Code 下載慢，解決辦法請點擊

• 雙擊下載文件，根據提示步驟進行安裝

  ?> 請將安裝路徑更改為D盤

  安裝過程中，建議勾選以下幾個選項：

  • 將“通過 code 打開“操作添加到 windows 資源管理器文件上下文菜單
  • 將“通過 code 打開”操作添加到 windows 資源管理器目錄上下文菜單
  • 添加到 PATH（重啟后生效）

• 設置中文

  • 1、點擊左邊插件對應圖標，在上面搜索欄中輸入 Chinese，安裝對應中文(簡體)

  

  • 2、同時按住Ctrl + Shift + p調出命令面板，輸入config display language

  

  • 3、選擇zh-cn

  

二、常用插件

!> 勾選代表必須安裝

• Beautify
• Prettier - Code formatter
• Vetur
• open in browser
• Visual Studio IntelliCode
• Live Server
• GitLens
• PHP Debug (僅官網 PHP 開發人員安裝)
• PHP IntelliSense (僅官網 PHP 開發人員安裝)
• Git Graph
• Todo Tree
• Code Runner
• Auto Close Tag
• Auto Remove Tag
• Debugger for Chrome
• Flutter

三、相關配置

點擊左下角設置圖標

• 關閉 Follow Symlinks

• 關閉 Auto Save

• 建議關閉 Git Autorefresh

四、統一配置代碼

!> 為了使編輯工具一致性及 code format 一致性，以下為可能影響代碼一致性的相關配置。保持代碼格式化一致性，有利于 git 管理。

TODO：后期將實現 ESLint 統一配置，并有望在 Git 本地 Hooks 中實現提交前自動格式化鉤子…

{"editor.tabSize": 2,"editor.fontSize": 14,"editor.formatOnType": true,"editor.wordWrapColumn": 180,"editor.codeActionsOnSave": {"source.fixAll.tslint": true,"source.fixAll.eslint": true,"source.fixAll.markdownlint": true},// 控制選取范圍是否有圓角"editor.roundedSelection": false,// 控制延遲多少毫秒后將顯示快速建議"editor.quickSuggestionsDelay": 6,"editor.renderControlCharacters": true,"editor.maxTokenizationLineLength": 50000,"editor.minimap.maxColumn": 60,"editor.suggestSelection": "first",// 啟用后，將在保存文件時剪裁尾隨空格。"files.trimTrailingWhitespace": true,// 啟用后，按下 TAB 鍵，將展開 Emmet 縮寫。"emmet.triggerExpansionOnTab": true,// Vetur相關配置"vetur.ignoreProjectWarning": true,"vetur.format.defaultFormatter.html": "js-beautify-html","vetur.format.defaultFormatter.js": "prettier","vetur.format.defaultFormatterOptions": {// 對vue模板文件的HTML片段進行格式化, 默認啟用"js-beautify-html": {"editor.formatOnSave": true,"editor.formatOnPaste": true,"editor.formatOnType": true,"tab_size": 2,"wrap_line_length": 180,"wrap_attributes": "preserve-aligned", // auto、preserve-aligned"end_with_newline": true,"space_after_anon_function": true},// 對vue模板文件的HTML片段進行格式化, 備選"prettyhtml": {"printWidth": 180,"singleQuote": false,"wrapAttributes": false,"sortAttributes": false},// 對vue模板文件的JavaScript片段進行格式化, 備選"prettier": {"eslintIntegration": true,"singleQuote": true,"printWidth": 180,"trailingComma": "none","jsxBracketSameLine": false}},"prettier.jsxBracketSameLine": true,"prettier.jsxSingleQuote": true,"prettier.singleQuote": true,"prettier.trailingComma": "none","typescript.preferences.quoteStyle": "single","typescript.surveys.enabled": false,"html.format.indentInnerHtml": true,"html.format.wrapAttributes": "preserve-aligned",// 默認格式化程序"[vue]": {"editor.defaultFormatter": "octref.vetur"},"[json]": {"editor.defaultFormatter": "vscode.json-language-features"},"[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[scss]": {"editor.defaultFormatter": "HookyQR.beautify"},"[jsonc]": {"editor.defaultFormatter": "vscode.json-language-features"},"[html]": {"editor.defaultFormatter": "vscode.html-language-features"},"[xml]": {"editor.defaultFormatter": "DotJoshJohnson.xml"},"[css]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},// 優化配置"search.followSymlinks": false,"git.autorefresh": false,"editor.formatOnSave": true
}