欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vscode 前端最佳配置小結(jié)

 更新時(shí)間:2020年04月30日 14:22:30   作者:ifredom  
這篇文章主要介紹了vscode 前端最佳配置小結(jié),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

vscode最佳配置

  • 添加如何設(shè)置屏幕閱讀器優(yōu)化
  • 添加對(duì) Flutter(Dart)的語(yǔ)法支持,配置在最底部
  • 最近一次更新時(shí)間: 2020.03.22 (vscode V1.39.2)

配置說(shuō)明詳解

  • vscode配置文件內(nèi)容在最后,已附上??芍苯觕opy使用
  • vue項(xiàng)目,標(biāo)準(zhǔn)格式化規(guī)范的eslint文件附在末尾

editor是針對(duì)vscode的風(fēng)格設(shè)置
例如 tabSize:一個(gè)tab等于2個(gè)空格,行高為24px

workbench是針對(duì)vscode的主題設(shè)置

例如 iconTheme( 圖標(biāo)風(fēng)格):使用插件 vscode-great-icons (需搜索安裝)

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

search.exclude 配置vscode中項(xiàng)目中的哪些地方被排除搜索,避免你每次搜索結(jié)果中都有一大堆無(wú)關(guān)內(nèi)容

files.associations 配置文件關(guān)聯(lián),比如(作演示) :

任何 vue 后綴的文件會(huì)被認(rèn)為是 html 文件 ,(查看編輯器右下角可見(jiàn)) 然后 vscode 會(huì)用 html 規(guī)則匹配 vue 文件做相應(yīng)格式化,代碼提示。
任何 wxss 后綴的文件會(huì)被認(rèn)為是 css 文件 ,然后 vscode 會(huì)用 css 規(guī)則匹配 wxss 文件,給出加載對(duì)應(yīng)的 css 的屬性排序,rem 自動(dòng)轉(zhuǎn)換,格式化等規(guī)則

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

sync是用于同步vscode配置使用,不用每一次換個(gè)電腦都要復(fù)制一次配置,避免丟失或者改動(dòng),保持一致!

apicloud 是用于同步vscode開(kāi)發(fā)apicloud程序時(shí)進(jìn)行手機(jī)wifi真機(jī)同步使用,不用數(shù)據(jù)線即可調(diào)試。

veturprettierstylus是用于vue開(kāi)發(fā)時(shí)的代碼格式化, 代碼提示.

eslint 是用于代碼格式化代碼時(shí),選擇用自己的格式化規(guī)則或者標(biāo)準(zhǔn)規(guī)則,prettier規(guī)則等

filesize在底部狀態(tài)欄左側(cè),顯示當(dāng)前文件大小,沒(méi)啥用

Live Server快速啟動(dòng)一個(gè)本地服務(wù)器,注意只對(duì).html和.htm文件有效。對(duì)html文件點(diǎn)擊鼠標(biāo)右鍵,選擇open with Live Server

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

屏幕閱讀器優(yōu)化, 可選項(xiàng). 此功能是 vscode 專門(mén)配合盲人閱讀器而做的貼心選項(xiàng),對(duì)于程序員來(lái)說(shuō)也有一定作用( 哈哈哈, 可以糾正中式英文發(fā)音):當(dāng)你的鼠標(biāo)懸浮在桌面任何位置,語(yǔ)音朗讀器都會(huì)朗讀出來(lái)所在位置的內(nèi)容。一旦在vscode中開(kāi)啟,那么底部會(huì)顯示如圖所示。具體如何設(shè)置在文尾。

vscode插件安裝

  • Atom One Dark Theme 主題
  • VSCode Great Icons 圖標(biāo)主題
  • Beautify 美化vscode代碼
  • Bracket Pair Colorizer 每一對(duì)括號(hào)用不同顏色區(qū)別 (括號(hào)強(qiáng)迫癥必備)
  • indent-rainbow 凸顯縮進(jìn),讓你的縮進(jìn)一目了然
  • Prettier 格式化,使用標(biāo)準(zhǔn)風(fēng)格,快捷鍵 alt+shift +F
  • EditorConfig for VS Code vscode的配置文件
  • cssrem 將css中的px自動(dòng)轉(zhuǎn)換為rem.再也不用計(jì)算器了(大漠大神推介)
  • Code Runner node,python等代碼不必開(kāi)命令行即可運(yùn)行
  • Eslint 語(yǔ)法檢測(cè)
  • GitLens 在代碼中顯示每一行代碼的提交歷史
  • HTML CSS Support vscode對(duì)html,css文件支持,便于你快速書(shū)寫(xiě)屬性
  • Vetur 添加對(duì).vue后綴文件的快速書(shū)寫(xiě)支持。
  • Vue 2 Snippets 快速新建vue頁(yè)面(參考我另一篇文章)
  • React Native Tools 添加對(duì) React Native項(xiàng)目的支持,快速書(shū)寫(xiě)es6以及jsx
  • C/C++ 運(yùn)行React Native項(xiàng)目時(shí),有些文件的查看需要這個(gè)
  • View In Browser 迅速通過(guò)瀏覽器打開(kāi)html文件
  • Sublime Text Keymap 啟動(dòng)sublimeText的快捷鍵配置。vscode上面自有一套快捷鍵設(shè)定,個(gè)人習(xí)慣sublime快捷鍵
  • markdownlint 書(shū)寫(xiě)md文件的預(yù)覽插件
  • Path Intellisense 路徑識(shí)別苦戰(zhàn),比如書(shū)寫(xiě)圖片路徑時(shí)。遺憾就是,對(duì)webpack項(xiàng)目中的路徑別名無(wú)法擴(kuò)展
  • npm Intellisense 在import語(yǔ)句中,自動(dòng)填充npm模塊。
  • language-stylus CSS預(yù)處理器,styl后綴文件的識(shí)別擴(kuò)展
  • Settings Sync 用于同步vscode配置,多臺(tái)電腦一份配置(相對(duì)而言配置復(fù)雜,可不安裝)
  • filesize 在底部狀態(tài)欄左側(cè),顯示當(dāng)前文件大小,還可以點(diǎn)擊喲
  • Document This 快速生成注釋,注意只對(duì)類和函數(shù)有效??旖萱I Ctrl+Alt+D
  • Live Server 快速啟動(dòng)一個(gè)本地服務(wù)器
  • Python 添加對(duì).py文件的支持,畢竟tab與空格的痛苦,寫(xiě)過(guò)python的都知道
  • Flutter 2018是 Flutter 最火爆的一年,2019持續(xù)爆炸
{ // 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的自動(dòng)格式化時(shí),有時(shí)會(huì)把一行過(guò)長(zhǎng)的代碼折行。400表示400個(gè)字符處折行
  "editor.wordWrapColumn": 400,
  "editor.wordWrap": "off",
  "editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": false
  },
  "editor.codeActionsOnSave": {
    "source.organizeImport": true
  },
  // 保存文件時(shí),自動(dòng)格式化
  "editor.formatOnSave": false,
  // 格式化粘貼到文件內(nèi)的內(nèi)容
  "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": {
    // 設(shè)置guide線高亮顏色
    "editorIndentGuide.activeBackground": "#ff0000"
  },
  // css2rem插件配置:設(shè)置書(shū)寫(xiě)css時(shí),px自動(dòng)提示轉(zhuǎn)換為rem的根字體大小,默認(rèn)值為16
  "cssrem.rootFontSize":100,
  // 啟用/禁用導(dǎo)航路徑
  "breadcrumbs.enabled": true,
  // 通過(guò)默認(rèn)瀏覽器打開(kāi)html文件
  "open-in-browser.default": "chrome",
  // VScode進(jìn)行文件搜索時(shí),不搜索這些區(qū)域。注意:vs已經(jīng)貼心的默認(rèn)設(shè)置了 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,
  },
  // 配置文件關(guān)聯(lián)
  // 比如小程序中的 .wxss 這種文件,會(huì)把它作為css文件來(lái)處理,提供對(duì)應(yīng)的css的語(yǔ)法提示,css的格式化等等。
  "files.associations": {
    "*.wxss": "css",
    "*.cjson": "jsonc",
    "*.wxs": "javascript",
    "*.ts": "typescript",
    "*.vue": "vue",
    "*.dart": "dart"
  },
  // vscode已經(jīng)內(nèi)置了emmet。配置emmet是否啟用tab展開(kāi)縮寫(xiě)
  // 這一設(shè)置最大作用是:當(dāng)輸入的文本不屬于Emmet定義的縮寫(xiě)規(guī)則時(shí),依然允許使用Tab鍵進(jìn)行縮進(jìn)。此時(shí)會(huì)提示我自定義的縮寫(xiě)語(yǔ)句,以及各插件自定義的縮寫(xiě)語(yǔ)句.
  "emmet.triggerExpansionOnTab": true,
  "emmet.showSuggestionsAsSnippets": true,
  // 配置emmet對(duì)哪種文件類型支持
  "emmet.syntaxProfiles": {
    "vue-html": "html",
    "vue": "html",
    "javascript": "javascriptreact",
    "xml": {
      "attr_quotes": "single"
    }
  },
  // 在 react 的jsx中添加對(duì)emmet的支持
  "emmet.includeLanguages": {
    "jsx-sublime-babel-tags": "javascriptreact",
    "wxml": "html"
  },
  // 格式化快捷鍵 shirt+alt+F,有時(shí)可能需要多按幾次
  // 因?yàn)槭褂?shirt+alt+F進(jìn)行格式化時(shí),先執(zhí)行編輯器的格式化規(guī)則,然后才會(huì)按照eslint和tslit這樣的其他插件去格式化。
  // 是否開(kāi)啟eslint檢測(cè)
  "eslint.enable": true,
  // 是否啟用根據(jù)eslint配置文件。文件保存時(shí),根據(jù)配置文件進(jìn)行格式化
  "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是否啟用自動(dòng)拉取
  "git.autofetch": true,
  // 配置gitlen中g(shù)it提交歷史記錄的信息顯示情況
  "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,
  // 設(shè)置端口。開(kāi)啟apicloud在vscode中的wifi真機(jī)同步
  "apicloud.port": "23450",
  // 設(shè)置apicloud在vscode中的wifi真機(jī)同步根目錄,默認(rèn)可不設(shè)置
  "apicloud.subdirectories": "/apicloudproject",
  // 這個(gè)設(shè)置是全局的,不可為每種語(yǔ)言配置。
  // 斷點(diǎn)調(diào)試時(shí),遇到斷點(diǎn),自動(dòng)顯示調(diào)試視圖。
  "debug.openDebug": "openOnDebugBreak",
  // 專為dart語(yǔ)言配置
  "[dart]": {
    // snippet :代碼片段
    // 保存文件時(shí),是否自動(dòng)格式化代碼,
    "editor.formatOnSave": true,
		// 當(dāng)你輸入特定字符時(shí),是否自動(dòng)格式化代碼,(比如輸入 `;` 和 `}`).
		"editor.formatOnType": true,

		// 在80個(gè)字符處畫(huà)一條引導(dǎo)線,這個(gè)范圍內(nèi)的dart代碼將被格式化。
		"editor.rulers": [80],

		// 禁用與所選內(nèi)容匹配的單詞的內(nèi)置突出顯示。如果不這樣做,所選文本的所有實(shí)例都將突出顯示,從而影響Dart突出顯示所選變量的精確引用的能力。
		"editor.selectionHighlight": false,

    // 默認(rèn)情況下,當(dāng)處于“代碼片段模式”(在插入的代碼中編輯占位符)時(shí),VS會(huì)防止snippets彈出打開(kāi)。
    // 如果設(shè)置為“false”,則表示允許完成操作打開(kāi),就像不在代碼段占位符中
		"editor.suggest.snippetsPreventQuickSuggestions": true,

    // coding時(shí),VScode會(huì)給我們給多提示,在所有的提示選項(xiàng)中會(huì)默認(rèn)選中第一個(gè),這一配置就是表示默認(rèn)選中哪一項(xiàng)。
		// 默認(rèn)值為:"first",表示VScode將總是選中第一項(xiàng)
		// (推介) "recentlyUsed" 表示vs code將從代碼提示中,預(yù)先選中最近使用過(guò)的項(xiàng),
		"editor.suggestSelection": "recentlyUsedByPrefix",

		// 允許使用按<tab>速寫(xiě)代碼片段,例如,輸入“for”時(shí),即使完成列表不可見(jiàn)。
		"editor.tabCompletion": "onlySnippets",

		// 默認(rèn)情況下,當(dāng)前的語(yǔ)言沒(méi)有代碼片段提示時(shí),VS Code將使用當(dāng)前文件中的你自己寫(xiě)過(guò)的單詞來(lái)顯示代碼片段提示。
    // 這導(dǎo)致代碼完成在編輯注釋和字符串時(shí)建議單詞。 此設(shè)置將阻止這種情況
    // 對(duì)于dart來(lái)說(shuō)最好關(guān)閉,對(duì)于html和css建議開(kāi)啟    
    "editor.wordBasedSuggestions": false,

		// 在文件底部添加新代碼行時(shí),強(qiáng)制所有文件都有一行空格。
		"files.insertFinalNewline": true,
  }
}

其他功能

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

文件 > 首選項(xiàng) >用戶代碼片段>新建全局代碼片段,粘貼保存。
測(cè)試方法:新建文件,輸入內(nèi)容author即可

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

Screen Reader(屏幕閱讀器)

只支持windows7以上操作系統(tǒng),不支持mac.

可用可不用,作為練習(xí)英語(yǔ)聽(tīng)力的小玩具.

首先下載并安裝軟件,Nvda, 需要的pass: he2m
安裝完成此軟件后啟動(dòng)。在vscode中配置項(xiàng)editor.quickSuggestions決定是否開(kāi)啟.

vue項(xiàng)目,標(biāo)準(zhǔn)格式化規(guī)范

.eslintrc.js

到此這篇關(guān)于vscode 前端最佳配置小結(jié)的文章就介紹到這了,更多相關(guān)vscode 前端最佳配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Git安裝詳細(xì)圖文教程(Git?安裝過(guò)程的每一個(gè)步驟)

    Git安裝詳細(xì)圖文教程(Git?安裝過(guò)程的每一個(gè)步驟)

    這篇文章主要介紹了Git安裝詳細(xì)圖文教程(Git?安裝過(guò)程的每一個(gè)步驟),本文以Git-2.35.1.2-64-bit.exe為例給大家講解安裝過(guò)程,需要的朋友可以參考下
    2023-02-02
  • Git版本控制常用命令及pycharm 使用git方法

    Git版本控制常用命令及pycharm 使用git方法

    這篇文章主要介紹了Git版本控制常用命令及pycharm 使用git方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-12-12
  • 自定義?Github?Action?庫(kù)實(shí)戰(zhàn)詳解

    自定義?Github?Action?庫(kù)實(shí)戰(zhàn)詳解

    這篇文章主要為大家介紹了自定義?Github?Action?庫(kù)實(shí)戰(zhàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-09-09
  • 如何讓vsCode顯示中文界面

    如何讓vsCode顯示中文界面

    vscode默認(rèn)的語(yǔ)言是英文,這給使用者帶來(lái)了一定的挑戰(zhàn),現(xiàn)在小編就來(lái)告訴你如何將vscode設(shè)置成中文。
    2020-01-01
  • 分享五個(gè)最佳編程字體

    分享五個(gè)最佳編程字體

    這篇文章主要介紹了分享五個(gè)最佳編程字體,需要的朋友可以參考下
    2016-10-10
  • git丟棄本地修改的所有文件(新增、刪除、修改)

    git丟棄本地修改的所有文件(新增、刪除、修改)

    這篇文章主要介紹了git丟棄本地修改的所有文件(新增、刪除、修改),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-11-11
  • git如何還原到某次commit并強(qiáng)制推送遠(yuǎn)程

    git如何還原到某次commit并強(qiáng)制推送遠(yuǎn)程

    這篇文章主要介紹了git如何還原到某次commit并強(qiáng)制推送遠(yuǎn)程的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • Wireshark TS FTP 傳輸失敗問(wèn)題解決

    Wireshark TS FTP 傳輸失敗問(wèn)題解決

    這篇文章主要為大家介紹了Wireshark TS FTP 傳輸失敗問(wèn)題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-03-03
  • 詳解如何使用git 生成patch 和打入patch

    詳解如何使用git 生成patch 和打入patch

    這篇文章主要介紹了詳解如何使用git 生成patch 和打入patch,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-07-07
  • Git恢復(fù)之前版本的兩種方法reset、revert(圖文詳解)

    Git恢復(fù)之前版本的兩種方法reset、revert(圖文詳解)

    這篇文章主要介紹了Git恢復(fù)之前版本的兩種方法reset、revert(圖文詳解),文中通過(guò)圖文示例介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-07-07

最新評(píng)論