點擊右邊

vscode 前端最好設Slot 教學置小結

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 文件做響應格局化,代碼提醒。
任何 wxs捕魚達人交易s 后綴的文件會被認為是 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:\\windows\\System32\\WindowsPowerShell\\v1.0\\powershell.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公眾: fals捕魚達人千砲版e,
“大眾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公眾,
// 許可使用按<tab&線上麻將pttgt;速寫代碼片斷,例如,輸出“for”時,縱然實現列表弗成見。
“大眾editor.tabCompletion”大眾: “大眾onlySnippets”大眾,
// 默許環境下,當前的說話沒有代碼片斷提醒時,VS Code將使用當前文件中的你本人寫過的單詞來顯示代碼片斷提醒。
// 這致使代碼實現在編纂正文以及字符串時倡議單詞。 此配置將制止這類環境
// 關于dart來說最佳封閉,關于html以及css倡議開啟
“大眾editor.wordBasedSuggestions公眾: false,
// 在文件底部增添新代碼行時,強迫一切文件都有一行空格。
公眾files.insertFinalNewline”大眾: true,
}
}

其余功效

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

文件 > 首選項 >用戶代碼片斷>新建全局代碼片斷,粘貼保管。
測試要領:新建文件,輸出內容author即可

【免責聲明】本站內容轉載自互聯網,其相關談吐僅代表作者小我私家概念盡非權勢巨子,不代表本站態度。如您發明內容存在版權成績,請提交相關鏈接至郵箱:,咱們將實時予以處置。

大樂透加碼