WebStorm設置

換行
File—Settings—Editor—General—勾選Soft-wrap these files，然后在后面添加;*.*來讓所有文件都自動換行

顯示行號
File—Settings—Editor—General—Appearance—Show line numbers

打開多個項目
File—Settings—Directories—Add Content Root

WebStorm快捷鍵

全局搜索（Ctrl + Shift + F）
Edit—Find—Find in Path

復制當前行或者所選代碼塊（Ctrl + D）

刪除光標所在位置行（Ctrl + Y）

格式化代碼（Ctrl + Alt + L）

行注釋（Ctrl + /）

塊注釋（Ctrl + Shift + /）

光標所在位置大小寫轉換（Ctrl + Shift + U）

重命名（Shift + F6）

環繞標簽（Ctrl + Alt + T）

VSCode設置

代碼縮進2個字符：搜索Detect Indentation然后取消勾選，再搜索tabsize從4改成2

自動折行：搜索editor.wordWrap設置為on，需要取消勾選屏幕優化

文件自動保存：搜索files.autoSave設置為onFocusChange，編輯器失去焦點時自動保存更新后的文件

Tab鍵自動填入最佳推薦值：editor.tabCompletion設置為on

設置顯示行號：搜索editor.lineNumbers設置為true

開啟代碼提示：搜索prevent取消此項的勾選

中文亂碼：①搜索files.autoGuessEncoding設置為true；②安裝GBKtoUTF8插件

VSCode插件

View In Browser（運行html文件）

Webstorm IntelliJ Darcula Theme（和Webstorm一樣的字體和主題）

open in browser（在瀏覽器中查看）

Live Server（實時預覽。我們在編輯器中修改代碼，按Ctrl+S保存，修改效果就會實時同步，顯示在瀏覽器中，不用再手動刷新。）

Auto Rename Tag（自動修改匹配的HTML標簽）

Highlight Matching Tag（高亮顯示匹配標簽。幫我們將選中的匹配標簽高亮顯示）

Vscode-icons VSCode（文件圖標）

Vscode-icons-mac（mac文件圖標）

TODO Highlight （高亮。如果我們在編寫代碼時想在某個地方做一個標記，后續再來完善或者修改里面的內容，可以利用此插件高亮顯示，之后可以幫助我們快速定位到需要修改的代碼行。）

Code Spell Checker（單詞拼寫檢查。會自動幫我們識別單詞拼寫錯誤并且給出修改建議）

Code Runner（運行選中代碼段。右鍵選擇Run Code，支持大量語言，包括Node）

Improt Cost（成本提示。導入工具包的時候提示這個包的體積）

GitLens（查看Git信息。將光標移到代碼行上，即可顯示當前行最近的commit信息和作者，多人開發的時候十分有用，責任到人，防止甩鍋）

Bookmarks（書簽。對代碼進行書簽標記，通過快捷鍵實現快速跳轉到書簽位置，具體的快捷鍵可以在鍵盤快捷方式中自定義設置。）

Vscode-element-helper（element-ui。編寫標簽時自動提示element標簽名稱）

Version Lens（工具包版本信息。在package.json中顯示你下載安裝的npm工具包的版本信息，同時會告訴你當前包的最新版本。）

Vetur（Vue語言包，語法高亮、智能感知、Emmet等。安裝插件后編寫vue文件輸入vue，按Tab鍵就可以自動補全模版。）

Path Intellisense（智能路徑提示，可以在你輸入文件路徑時智能提示。）

Markdown Preview（實時預覽Markdown）

Stylelint（CSS / SCSS / Less 語法檢查）

VueHelper（snippet代碼片段）

CSScomb（CSS 書寫順序規則）

Turbo Console Log（快捷添加 console.log，一鍵 注釋 / 啟用 / 刪除 所有 console.log。ctrl + alt + l 選中變量之后，使用這個快捷鍵生成 console.log；alt + shift + c 注釋所有 console.log；alt + shift + u 啟用所有 console.log；alt + shift + d 刪除所有 console.log）

css-auto-prefix（自動添加 CSS 私有前綴）

change-case（轉換命名風格。快速更改當前選擇或當前單詞的大小寫(camelCase, CONSTANT_CASE, snake_case等)）

CSS Peek（從html中的class定位到在css樣式的位置）

vscode-json（處理 JSON 文件格式）

Regex Previewer（實時預覽正則表達式的效果）

Chinese (Simplified) (簡體中文) Language Pack for Visual Studio Code

css-format-one-line（css單行多行格式化。格式化為單行Ctrl + J；格式化為多行Ctrl + I）

Codelf(變量命名神器)

Project Manager(項目管理器)

EditorConfig for VS Code（多人協作統一代碼風格）

Prettier - Code formatter（代碼格式化）

ESLint（代碼檢測）

Vue VSCode Snippets（快速生成Vue3代碼，使用文檔）

htmltagwrap（外層包裹一層默認的標簽（默認標簽可以更改），按“Alt+w”、“option+w“）

Color Info（在 CSS 中使用顏色的相關信息。你只需在顏色上懸停光標，就可以預覽色塊中色彩模型的（HEX、 RGB、HSL 和 CMYK）相關信息了）

DotENV（讀取.env文件）

Remote ssh（部署上線時使用，修改遠程服務器里面文件的方式）

VSCode快捷鍵

生成vue模板（vue→tab）

生成html模板（!→tab）

固定窗口打開所有文件（雙擊文件標題變成正體）

最小化窗口（Ctrl+H）

剪切一行（Ctrl+X）

刪除一行（Ctrl+Shift+K）

復制一行（向下復制一行shift + alt + ↓ ）（向上復制一行shift + alt + ↑ ）

查找替換（Ctrl+H）

替換查找的全部內容Ctrl+Alt+Enter

塊級注釋（Shift+Alt+A）（MAC：Shift + Option + A）

總結

以上是生活随笔為你收集整理的WebStorm和VSCode配置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。