歡迎您光臨本站 註冊首頁

vscode 前端最佳配置小結

←手機掃碼閱讀     madbeef @ 2020-04-30 , reply:0

vscode最佳配置

添加如何設置 屏幕閱讀器優化

添加對 Flutter(Dart) 的語法支持,配置在最底部

的語法支持,配置在最底部 最近一次更新時間: 2020.03.22 (vscode V1.39.2)

配置說明詳解

vscode配置文件內容在最後,已附上。可直接copy使用

vue項目,標準格式化規範的eslint文件附在末尾

editor 是針對vscode的 風格設置

例如 tabSize :一個tab等於2個空格,行高為24px

workbench 是針對vscode的 主題設置



例如 iconTheme( 圖標風格):使用插件 vscode-great-icons (需搜索安裝)



例如 colorTheme(代碼顏色風格):使用插件 One Dark Pro Vivid(需搜索安裝)

search.exclude 配置vscode中項目中的哪些地方被排除搜索,避免你每次搜索結果中都有一大堆無關內容

files.associations 配置文件關聯,比如(作演示) :

任何 vue 後綴的文件會被認為是 html 文件 ,(查看編輯器右下角可見) 然後 vscode 會用 html 規則匹配 vue 文件做相應格式化,代碼提示。

任何 wxss 後綴的文件會被認為是 css 文件 ,然後 vscode 會用 css 規則匹配 wxss 文件,給出加載對應的 css 的屬性排序,rem 自動轉換,格式化等規則

"files.associations": { "*.vue": "html", "*.wxss": "css" }

sync 是用於 同步vscode配置 使用,不用每一次換個電腦都要複製一次配置,避免丟失或者改動,保持一致!

apicloud 是用於同步vscode開發apicloud程序時進行手機wifi真機同步使用, 不用數據線即可調試 。

vetur 和 prettier 和 stylus 是用於 vue 開發時的代碼格式化, 代碼提示.

eslint 是用於代碼格式化代碼時,選擇用自己的格式化規則或者標準規則,prettier規則等

filesize 在底部狀態欄左側,顯示當前文件大小,沒啥用

Live Server 快速啟動一個本地服務器,注意只對.html和.htm文件有效。對html文件點擊鼠標右鍵,選擇 open with Live Server

Sublime Text Keymap 很多FD習慣使用 sublime 的一套快捷鍵。

屏幕閱讀器優化 , 可選項. 此功能是 vscode 專門配合 盲人閱讀器 而做的貼心選項,對於程序員來說也有一定作用( 哈哈哈, 可以糾正中式英文發音): 當你的鼠標懸浮在桌面任何位置,語音朗讀器都會朗讀出來所在位置的內容 。一旦在vscode中開啟,那麼底部會顯示如圖所示。具體如何設置在文尾。



vscode插件安裝

Atom One Dark Theme 主題

VSCode Great Icons 圖標主題

Beautify 美化vscode代碼

Bracket Pair Colorizer 每一對括號用不同顏色區別 (括號強迫症必備)

indent-rainbow 凸顯縮進,讓你的縮進一目瞭然

Prettier 格式化,使用標準風格,快捷鍵 alt+shift +F

EditorConfig for VS Code vscode的配置文件

cssrem 將css中的px自動轉換為rem.再也不用計算器了(大漠大神推介)

Code Runner node,python等代碼不必開命令行即可運行

Eslint 語法檢測

GitLens 在代碼中顯示每一行代碼的提交歷史

HTML CSS Support vscode對html,css文件支持,便於你快速書寫屬性

Vetur 添加對.vue後綴文件的快速書寫支持。

Vue 2 Snippets 快速新建vue頁面(參考我另一篇文章)

React Native Tools 添加對 React Native項目的支持,快速書寫es6以及jsx

C/C++ 運行React Native項目時,有些文件的查看需要這個

View In Browser 迅速通過瀏覽器打開html文件

Sublime Text Keymap 啟動sublimeText的快捷鍵配置。vscode上面自有一套快捷鍵設定,個人習慣sublime快捷鍵

markdownlint 書寫md文件的預覽插件

Path Intellisense 路徑識別苦戰,比如書寫圖片路徑時。遺憾就是,對webpack項目中的路徑別名無法擴展

npm Intellisense 在import語句中,自動填充npm模塊。

language-stylus CSS預處理器,styl後綴文件的識別擴展

Settings Sync 用於同步vscode配置,多臺電腦一份配置(相對而言配置複雜,可不安裝)

filesize 在底部狀態欄左側,顯示當前文件大小,還可以點擊喲

Document This 快速生成註釋,注意只對類和函數有效。快捷鍵 Ctrl+Alt+D

Live Server 快速啟動一個本地服務器

Python 添加對.py文件的支持,畢竟tab與空格的痛苦,寫過python的都知道

Flutter 2018是 Flutter 最火爆的一年,2019持續爆炸



{ // VScode主題配置 "editor.tabSize": 2, "editor.lineHeight": 24, "editor.renderLineHighlight": "none", "editor.renderWhitespace": "none", "editor.fontFamily": "Consolas", "editor.fontSize": 15, "editor.cursorBlinking": "smooth", "editor.multiCursorModifier": "ctrlCmd", "editor.snippetSuggestions": "top", // 使用vscode的自動格式化時,有時會把一行過長的代碼折行。400表示400個字符處折行 "editor.wordWrapColumn": 400, "editor.wordWrap": "off", "editor.quickSuggestions": { "other": true, "comments": true, "strings": false }, "editor.codeActionsOnSave": { "source.organizeImport": true }, // 保存文件時,自動格式化 "editor.formatOnSave": false, // 格式化粘貼到文件內的內容 "editor.formatOnPaste": false, "terminal.integrated.shell.windows": "C:windowsSystem32WindowsPowerShellv1.0powershell.exe", "javascript.suggestionActions.enabled": false, "javascript.updateImportsOnFileMove.enabled": "always", "javascript.implicitProjectConfig.experimentalDecorators": true, "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "workbench.iconTheme": "vscode-great-icons", "workbench.startupEditor": "newUntitledFile", "workbench.colorTheme": "Dracula Soft", "workbench.colorCustomizations": { // 設置guide線高亮顏色 "editorIndentGuide.activeBackground": "#ff0000" }, // css2rem插件配置:設置書寫css時,px自動提示轉換為rem的根字體大小,默認值為16 "cssrem.rootFontSize":100, // 啟用/禁用導航路徑 "breadcrumbs.enabled": true, // 通過默認瀏覽器打開html文件 "open-in-browser.default": "chrome", // VScode進行文件搜索時,不搜索這些區域。注意:vs已經貼心的默認設置了 node_modules 和 bower_components 文件夾 "search.exclude": { "**/.git": true, "**/.gitignore": true, "**/.svn": true, "**/.DS_Store": true, "**/.idea": true, "**/.vscode": false, "**/yarn.lock": true, "**/tmp": true, "**/dist": true, "**/build": true, }, // 配置文件關聯 // 比如小程序中的 .wxss 這種文件,會把它作為css文件來處理,提供對應的css的語法提示,css的格式化等等。 "files.associations": { "*.wxss": "css", "*.cjson": "jsonc", "*.wxs": "javascript", "*.ts": "typescript", "*.vue": "vue", "*.dart": "dart" }, // vscode已經內置了emmet。配置emmet是否啟用tab展開縮寫 // 這一設置最大作用是:當輸入的文本不屬於Emmet定義的縮寫規則時,依然允許使用Tab鍵進行縮進。此時會提示我自定義的縮寫語句,以及各插件自定義的縮寫語句. "emmet.triggerExpansionOnTab": true, "emmet.showSuggestionsAsSnippets": true, // 配置emmet對哪種文件類型支持 "emmet.syntaxProfiles": { "vue-html": "html", "vue": "html", "javascript": "javascriptreact", "xml": { "attr_quotes": "single" } }, // 在 react 的jsx中添加對emmet的支持 "emmet.includeLanguages": { "jsx-sublime-babel-tags": "javascriptreact", "wxml": "html" }, // 格式化快捷鍵 shirt+alt+F,有時可能需要多按幾次 // 因為使用 shirt+alt+F進行格式化時,先執行編輯器的格式化規則,然後才會按照eslint和tslit這樣的其他插件去格式化。 // 是否開啟eslint檢測 "eslint.enable": true, // 是否啟用根據eslint配置文件。文件保存時,根據配置文件進行格式化 "eslint.autoFixOnSave": true, // eslint配置文件 ,修改為你自己電腦上的文件位置,或者直接刪除 "eslint.options": { "configFile": "D:/worksapce/youxiang-mobile-master/.eslintrc.js", "plugins": ["html"] }, "eslint.validate": [ "javascript", "javascriptreact", "html", "vue", "typescript", "typescriptreact" ], // 安裝了tslint插件後,是否啟用該插件 "typescript.validate.enable": false, // git是否啟用自動拉取 "git.autofetch": true, // 配置gitlen中git提交歷史記錄的信息顯示情況 "gitlens.advanced.messages": { "suppressCommitHasNoPreviousCommitWarning": false, "suppressCommitNotFoundWarning": false, "suppressFileNotUnderSourceControlWarning": false, "suppressGitVersionWarning": false, "suppressLineUncommittedWarning": false, "suppressNoRepositoryWarning": false, "suppressResultsExplorerNotice": false, "suppressShowKeyBindingsNotice": true, "suppressUpdateNotice": true, "suppressWelcomeNotice": false }, // 是否格式化python文件 "python.linting.enabled": false, // 設置端口。開啟apicloud在vscode中的wifi真機同步 "apicloud.port": "23450", // 設置apicloud在vscode中的wifi真機同步根目錄,默認可不設置 "apicloud.subdirectories": "/apicloudproject", // 這個設置是全局的,不可為每種語言配置。 // 斷點調試時,遇到斷點,自動顯示調試視圖。 "debug.openDebug": "openOnDebugBreak", // 專為dart語言配置 "[dart]": { // snippet :代碼片段 // 保存文件時,是否自動格式化代碼, "editor.formatOnSave": true, // 當你輸入特定字符時,是否自動格式化代碼,(比如輸入 `;` 和 `}`). "editor.formatOnType": true, // 在80個字符處畫一條引導線,這個範圍內的dart代碼將被格式化。 "editor.rulers": [80], // 禁用與所選內容匹配的單詞的內置突出顯示。如果不這樣做,所選文本的所有實例都將突出顯示,從而影響Dart突出顯示所選變量的精確引用的能力。 "editor.selectionHighlight": false, // 默認情況下,當處於“代碼片段模式”(在插入的代碼中編輯佔位符)時,VS會防止snippets彈出打開。 // 如果設置為“false”,則表示允許完成操作打開,就像不在代碼段佔位符中 "editor.suggest.snippetsPreventQuickSuggestions": true, // coding時,VScode會給我們給多提示,在所有的提示選項中會默認選中第一個,這一配置就是表示默認選中哪一項。 // 默認值為:"first",表示VScode將總是選中第一項 // (推介) "recentlyUsed" 表示vs code將從代碼提示中,預先選中最近使用過的項, "editor.suggestSelection": "recentlyUsedByPrefix", // 允許使用按

速寫代碼片段,例如,輸入“for”時,即使完成列表不可見。 "editor.tabCompletion": "onlySnippets", // 默認情況下,當前的語言沒有代碼片段提示時,VS Code將使用當前文件中的你自己寫過的單詞來顯示代碼片段提示。 // 這導致代碼完成在編輯註釋和字符串時建議單詞。 此設置將阻止這種情況 // 對於dart來說最好關閉,對於html和css建議開啟 "editor.wordBasedSuggestions": false, // 在文件底部添加新代碼行時,強制所有文件都有一行空格。 "files.insertFinalNewline": true, } }

其他功能

在文件頭添加用戶作者,逼格滿滿,效果如圖

文件 > 首選項 >用戶代碼片段>新建全局代碼片段,粘貼保存。

測試方法:新建文件,輸入內容 author 即可

{ "用戶信息": { // prefix: 在編輯器中輸入 author 時,編輯器建議中會顯示該片段。 "prefix": "author", // TM_FILENAME_BASE: 當前文件名 // CURRENT_YEAR:年(4位數) CURRENT_YEAR_SHORT:年(2位數) CURRENT_MONTH:月 CURRENT_DATE:日 // CURRENT_HOUR:小時 CURRENT_MINUTE :分鐘 CURRENT_SECOND:秒 "body": [ "/*", "* @module ${TM_FILENAME_BASE}", "* @author : ifredom", "* @description : ifredom是一位FD.", "* @since : 創建時間 ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}", "*/", "" ], // 描述說明,在片段說明中會顯示此字段的文本內容。 "description": "Insert description." } }

Screen Reader(屏幕閱讀器)

只支持windows7以上操作系統,不支持mac.

可用可不用,作為練習英語聽力的小玩具.

首先下載並安裝軟件,Nvda, 需要的pass: he2m

安裝完成此軟件後啟動。在vscode中配置項 editor.quickSuggestions 決定是否開啟.

vue項目,標準格式化規範

.eslintrc.js


[madbeef ] vscode 前端最佳配置小結已經有524次圍觀

http://coctec.com/docs/vscode/show-post-232316.html