vscode配置總結(jié)可收藏/vscode用戶設(shè)置大全/vue代碼模板，vscodevue

?

?

//用戶設(shè)置

{

//-------- 搜索配置 --------

"search.exclude": {

"**/node_modules": true,

"**/bower_components": true,

"**/.git": true,

"**/.DS_Store": true,

"**/*.meta": true,

"**/*.*.meta": true,

"**/*.unity": true,

"**/*.unityproj": true,

"**/*.mat": true,

"**/*.fbx": true,

"**/*.FBX": true,

"**/*.tga": true,

"**/*.cubemap": true,

"**/**.prefab": true,

"**/Library": true,

"**/ProjectSettings": true,

"**/Temp": true,

"**/*.exe": true

},

// 配置 glob 模式以排除文件和文件夾。

"files.exclude": {

"**/.git": true,

"**/.DS_Store": true,

"**/*.meta": true,

"**/*.*.meta": true,

"**/*.unity": true,

"**/*.unityproj": true,

"**/*.mat": true,

"**/*.fbx": true,

"**/*.FBX": true,

"**/*.tga": true,

"**/*.cubemap": true,

"**/**.prefab": true,

"**/Library": true,

"**/ProjectSettings": true,

"**/Temp": true,

"**/*.exe": true

}, //前兩個(gè)配置會(huì)引起全局搜索失效

// 控制編輯器是否應(yīng)呈現(xiàn)空白字符

"editor.renderWhitespace": "all",

// 控制字體大小。

"editor.fontSize": 12,

// 是否啟用了 GIT

"git.enabled": false,

// 控制編輯器是否應(yīng)呈現(xiàn)空白字符

"editor.renderWhitespace": "all",

//自動(dòng)換行

"editor.wordWrap": "on",

// 是否應(yīng)該呈現(xiàn)縮進(jìn)指南

"editor.renderIndentGuides":true,

// Ctrl + 鼠標(biāo)滾軸可以縮放視圖

"editor.mouseWheelZoom" : true,

// 這樣 visual code 就可以調(diào)試和運(yùn)行 python代碼了！ 當(dāng)前了也要安裝插件

"python.pythonPath": "E:/Program Files/Python35/python.exe",

// Whether to lint Python files.

"python.linting.enabled": false,

// 打開多個(gè)文件的時(shí)候 Tab頁的方式顯示(否則只能是分屏顯示)

"workbench.editor.showTabs": true,

// 新打開的顯示在最左面

"workbench.editor.openPositioning": "left",

"window.zoomLevel": 1,

"files.autoSave": "afterDelay",

"liveServer.settings.donotShowInfoMsg": true,

"workbench.colorTheme": "Visual Studio Dark",

"explorer.confirmDragAndDrop": false,

// lua 的調(diào)試工具 Lua and Ravi 5.3 Debugger https://marketplace.visualstudio.com/items?itemName=ravilang.ravi-debug

// go 插件也有調(diào)試功能， 但是要配置具體的環(huán)境變量！

//ctrl+space被切換輸入法快捷鍵占用

"files.associations": {

"*.vue":"html",

"*.css": "scss"

},

//react代碼提示

"emmet.includeLanguages": {

"javascript": "javascriptreact"

}

}

?

?

常用插件：

View In Browser

- 預(yù)覽頁面(ctrl+F1)

vscode-icons

- 側(cè)欄的圖標(biāo)，對(duì)于一個(gè)有視覺強(qiáng)迫癥的人是必須要的

HTML Snippets

- 支持HTML5的標(biāo)簽提示

HTML CSS support

- css自動(dòng)補(bǔ)齊

jQuery Code Snippets

jquery 自動(dòng)提示

Path Autocomplete

- 路徑自動(dòng)補(bǔ)齊

Npm Intellisense

- npm包代碼提示

ESLint

- 檢測(cè)JS必備

Debugger for Chrome

- 方便調(diào)試

Auto Rename Tag

- 自動(dòng)同步修改標(biāo)簽

Bootstrap 3 Snippets

- bootstrap必備

Vue 2 Snippets

- vue必備

vetur

- vue高亮

background

- 一個(gè)萌萌的插件，可以自己設(shè)置vsc的背景圖

Live Server

服務(wù)器

open in?Browser

瀏覽器打開

Bracket Pair Colorizer

括號(hào)顏色匹配

React Native Tools

react必備

Code Spell Checker

檢測(cè)寫代碼時(shí)錯(cuò)詞

Nest Comments

可以覆蓋注釋一段有代碼注釋的代碼 ? ctrl+alt+/

htmltagwrap

一鍵添加外圍標(biāo)簽 /Alt?+?W ? 默認(rèn)p，可調(diào)整為div

javascript console utils

一鍵添加console.log() / shift+ctrl+l

額外 插件列表

名稱?? ?簡(jiǎn)述

Auto Close Tag?? ?自動(dòng)閉合HTML標(biāo)簽

Auto Import?? ?Typescript自動(dòng)import提示

Auto Rename Tag?? ?修改HTML標(biāo)簽時(shí)，自動(dòng)修改匹配的標(biāo)簽

Beautify css/sass/scss/less?? ?css/sass/less格式化

Better Align?? ?對(duì)齊賦值符號(hào)和注釋

Better Comments?? ?編寫更加人性化的注釋

Bookmarks?? ?添加行書簽

Bracket Pair Colorizer?? ?用不同顏色高亮顯示匹配的括號(hào)

Can I Use?? ?HTML5、CSS3、SVG的瀏覽器兼容性檢查

Code Runner?? ?運(yùn)行選中代碼段(支持大量語言，包括Node)

Code Spellchecker?? ?單詞拼寫檢查

CodeBing?? ?在VSCode中彈出瀏覽器并搜索，可編輯搜索引擎

Color Highlight?? ?顏色值在代碼中高亮顯示

Color Info?? ?小窗口顯示顏色值，rgb,hsl,cmyk,hex等等

Color Picker?? ?拾色器

Dash?? ?集成Dash

Debugger for Chrome?? ?調(diào)試Chrome

Document This?? ?注釋文檔生成

ESLint?? ?ESLint插件，高亮提示

EditorConfig for VS Code?? ?EditorConfig插件

Emoji?? ?在代碼中輸入emoji

File Peek?? ?根據(jù)路徑字符串，快速定位到文件

Font-awesome codes for html?? ?FontAwesome提示代碼段

Git Blame?? ?在狀態(tài)欄顯示當(dāng)前行的Git信息

Git History(git log)?? ?查看git log

GitLens?? ?顯示文件最近的commit和作者，顯示當(dāng)前行commit信息

Guides?? ?高亮縮進(jìn)基準(zhǔn)線

Gulp Snippets?? ?Gulp代碼段

HTML CSS Class Completion?? ?CSS class提示

HTML CSS Support?? ?css提示(支持vue)

HTMLHint?? ?HTML格式提示

htmltagwrap?? ?包裹HTML

Import Cost?? ?行內(nèi)顯示導(dǎo)入(import/require)的包的大小

Indenticator?? ?縮進(jìn)高亮

IntelliSense for css class names?? ?css class輸入提示

JavaScript (ES6) code snippets?? ?ES6語法代碼段

JavaScript Standard Style?? ?Standard風(fēng)格

JSON to TS?? ?JSON結(jié)構(gòu)轉(zhuǎn)化為typescript的interface

JSON Tools?? ?格式化和壓縮JSON

Less IntelliSense?? ?less變量與混合提示

Lodash?? ?Lodash代碼段

Log Wrapper?? ?生產(chǎn)打印選中變量的代碼

MochaSnippets?? ?Mocha代碼段

Node modules resolve?? ?快速導(dǎo)航到Node模塊

Code Outline?? ?展示代碼結(jié)構(gòu)樹

Output Colorizer?? ?彩色輸出信息

Partial Diff?? ?對(duì)比兩段代碼或文件

Path Autocomplete?? ?路徑完成提示

Path Intellisense?? ?另一個(gè)路徑完成提示

PostCss Sorting?? ?css排序

Prettify JSON?? ?格式化JSON

Project Manager?? ?快速切換項(xiàng)目

Quokka.js?? ?不需要手動(dòng)運(yùn)行，行內(nèi)顯示變量結(jié)果

REST Client?? ?發(fā)送REST風(fēng)格的HTTP請(qǐng)求

React Native Storybooks?? ?storybook預(yù)覽插件，支持react

React Playground?? ?為編輯器提供一個(gè)react組件運(yùn)行環(huán)境，方便調(diào)試

React Standard Style code snippets?? ?react standar風(fēng)格代碼塊

Sass?? ?sass插件

Settings Sync?? ?VSCode設(shè)置同步到Gist

Sort Typescript Imports?? ?typescript的import排序

Sort lines?? ?排序選中行

String Manipulation?? ?字符串轉(zhuǎn)換處理(駝峰、大寫開頭、下劃線等等)

SVG Viewer?? ?SVG查看器

Syncing?? ?vscode設(shè)置同步到gist

TODO Parser?? ?Todo管理

TS/JS postfix completion?? ?ts/js后綴提示

TSLint?? ?TypeScript語法檢查

Test Spec Generator?? ?測(cè)試用例生成(支持chai、should、jasmine)

TypeScript Import?? ?TS自動(dòng)import

TypeSearch?? ?TS聲明文件搜索

Types auto installer?? ?自動(dòng)安裝@types聲明依賴

VSCode Great Icons?? ?文件圖標(biāo)拓展

Version Lens?? ?package.json文件顯示模塊當(dāng)前版本和最新版本

View Node Package?? ?快速打開選中模塊的主頁和代碼倉(cāng)庫(kù)

VueHelper?? ?Vue2代碼段(包括Vue2 api、vue-router2、vuex2)

filesize?? ?狀態(tài)欄顯示當(dāng)前文件大小

ftp-sync?? ?同步文件到ftp

gitignore?? ?.gitignore文件語法

htmltagwrap?? ?快捷包裹html標(biāo)簽

language-stylus?? ?Stylus語法高亮和提示

markdownlint?? ?Markdown格式提示

npm Intellisense?? ?導(dǎo)入模塊時(shí)，提示已安裝模塊名稱

npm?? ?運(yùn)行npm命令

stylelint?? ?css/sass/less代碼風(fēng)格

vetur?? ?目前比較好的Vue語法高亮

vscode-database?? ?操作數(shù)據(jù)庫(kù)，支持mysql和postgres

vscode-icons?? ?文件圖標(biāo)，方便定位文件

vscode-random?? ?隨機(jī)字符串生成器

vscode-spotify?? ?集成spotify，播放音樂

vscode-styled-components?? ?styled-components高亮支持

vscode-styled-jsx?? ?styled-jsx高亮支持

vue代碼模板

{

"Print to console": {

"prefix": "vue",

"body": [

"

" new Vue({",

" el: '#box',",

" data: {",

" ",

" },",

" methods: {",

" greet: function (event) {",

" ",

" }",

" }",

" })",

""

],

"description": "Log output to console"

}

}

相關(guān)文章暫無相關(guān)文章

總結(jié)

以上是生活随笔為你收集整理的vscode输入vue自动_vscode配置总结可收藏/vscode用户设置大全/vue代码模板，vscodevue...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。