配置記錄

  • liveserver配置：
    "liveServer.settings.NoBrower": true,
    "liveServer.settings.port": 5500,
    "liveServer.settings.host": "127.0.0.1",
    "liveServer.settings.CustomBrowser": "chrome",
    "liveServer.settings.donotShowInfoMsg": true,
    "liveServer.settings.donotVerifyTags": true
  • beautify配置：
    "editor.formatOnSave":true（自動保存時格式化html文檔）
  • vscode必備插件：
    轉(zhuǎn)載來源
    Auto Close Tag 自動添加HTML / XML關(guān)閉標(biāo)簽
    Auto Rename Tag 自動重命名配對的HTML / XML標(biāo)簽
    Beautify 格式化代碼
    Bracket Pair Colorizer 顏色識別匹配括號
    Code Runner 非常強大的一款插件，能夠運行多種語言的代碼片段或代碼文件：C，C ++，Java，JavaScript，PHP，Python，Perl，Ruby，Go等等
    安裝完成后，右上角會出現(xiàn)：?
    change-case 雖然 VSCode 內(nèi)置了開箱即用的文本轉(zhuǎn)換選項，但其只能進(jìn)行文本大小寫的轉(zhuǎn)換。而此插件則添加了用于修改文本的更多命名格式，包括駝峰命名、下劃線分隔命名，snake_case 命名以及 CONST_CAS 命名等
    Chinese (Simplified) Language Pack for Visual Studio Code 中文簡體語言包
    Color Info 這個便捷的插件，將為你提供你在 CSS 中使用顏色的相關(guān)信息。你只需在顏色上懸停光標(biāo)，就可以預(yù)覽色塊中色彩模型的（HEX、 RGB、HSL 和 CMYK）相關(guān)信息了
    CSS Peek 使用此插件，你可以追蹤至樣式表中 CSS 類和 ids 定義的地方。當(dāng)你在 HTML 文件中右鍵單擊選擇器時，選擇“ Go to Definition 和 Peek definition ”選項，它便會給你發(fā)送樣式設(shè)置的 CSS 代碼
    Debugger for Chrome 前端調(diào)試, 查看使用方法
    ESLint EsLint可以幫助我們檢查Javascript編程時的語法錯誤。比如：在Javascript應(yīng)用中，你很難找到你漏泄的變量或者方法。EsLint能夠幫助我們分析JS代碼，找到bug并確保一定程度的JS語法書寫的正確性
    filesize 在底部狀態(tài)欄顯示當(dāng)前文件大小，點擊后還可以看到詳細(xì)創(chuàng)建、修改時間
    Git History 以圖表的形式查看 git 日志
    GitLens — Git supercharged 顯示文件最近的 commit 和作者，顯示當(dāng)前行 commit 信息
    HTML Boilerplate 通過使用 HTML 模版插件，你就擺脫了為 HTML 新文件重新編寫頭部和正文標(biāo)簽的苦惱。你只需在空文件中輸入 html，并按 Tab 鍵，即可生成干凈的文檔結(jié)構(gòu)
    HTMLHint HTML 代碼格式檢測
    HTML Snippets 代碼自動填充
    htmltagwrap 在選中HTML標(biāo)簽中外面套一層標(biāo)簽
    ”Alt + W” (“Option + W” for Mac)
    Image Preview 鼠標(biāo)移到路徑里顯示圖像預(yù)覽
    Indenticator 突出目前的縮進(jìn)深度
    intelliSense for CSS class names in HTML 把項目中 css 文件里的名稱智能提示在 html 中
    JavaScript (ES6) code snippets es6代碼片段
    Live Server 瀏覽器實時刷新
    Node.js Modules Intellisense 可以在導(dǎo)入語句中自動完成JavaScript / TypeScript模塊
    npm Intellisense require 時的包提示
    Path Intellisense 路徑自動補全
    Quokka.js Quokka 是一個調(diào)試工具插件，能夠根據(jù)你正在編寫的代碼提供實時反饋
    使用方法: ctrl+shift+p 輸入 quokka 選擇 new javascript 就可以了
    Regex Previewer 這是一個用于實時測試正則表達(dá)式的實用工具。它可以將正則表達(dá)式模式應(yīng)用在任何打開的文件上，并高亮所有的匹配項
    SVG Viewer 此插件在 Visual Studio 代碼中添加了許多實用的 SVG 程序，你無需離開編輯器，便可以打開 SVG 文件并查看它們。同時，它還包含了用于轉(zhuǎn)換為 PNG 格式和生成數(shù)據(jù) URI 模式的選項
    Vetur Vue 語法高亮顯示, 語法錯誤檢查, 代碼自動補全
    (配合 ESLint 插件效果更佳)
    vscode-fileheader 頂部注釋模板，可定義作者、時間等信息，并會自動更新最后修改時間
    快捷鍵: Ctrl+Alt+i
    (默認(rèn)信息可在 文件→首選項→設(shè)置 中修改)
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容