vscode输入vue自动_vscode配置总结可收藏/vscode用户设置大全/vue代码模板，vscodevue...
vscode配置總結可收藏/vscode用戶設置大全/vue代碼模板，vscodevue
?
?
//用戶設置
{
//-------- 搜索配置 --------
"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
}, //前兩個配置會引起全局搜索失效
// 控制編輯器是否應呈現空白字符
"editor.renderWhitespace": "all",
// 控制字體大小。
"editor.fontSize": 12,
// 是否啟用了 GIT
"git.enabled": false,
// 控制編輯器是否應呈現空白字符
"editor.renderWhitespace": "all",
//自動換行
"editor.wordWrap": "on",
// 是否應該呈現縮進指南
"editor.renderIndentGuides":true,
// Ctrl + 鼠標滾軸可以縮放視圖
"editor.mouseWheelZoom" : true,
// 這樣 visual code 就可以調試和運行 python代碼了！ 當前了也要安裝插件
"python.pythonPath": "E:/Program Files/Python35/python.exe",
// Whether to lint Python files.
"python.linting.enabled": false,
// 打開多個文件的時候 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 的調試工具 Lua and Ravi 5.3 Debugger https://marketplace.visualstudio.com/items?itemName=ravilang.ravi-debug
// go 插件也有調試功能， 但是要配置具體的環境變量！
//ctrl+space被切換輸入法快捷鍵占用
"files.associations": {
"*.vue":"html",
"*.css": "scss"
},
//react代碼提示
"emmet.includeLanguages": {
"javascript": "javascriptreact"
}
}
?
?
常用插件：
View In Browser
- 預覽頁面(ctrl+F1)
vscode-icons
- 側欄的圖標，對于一個有視覺強迫癥的人是必須要的
HTML Snippets
- 支持HTML5的標簽提示
HTML CSS support
- css自動補齊
jQuery Code Snippets
jquery 自動提示
Path Autocomplete
- 路徑自動補齊
Npm Intellisense
- npm包代碼提示
ESLint
- 檢測JS必備
Debugger for Chrome
- 方便調試
Auto Rename Tag
- 自動同步修改標簽
Bootstrap 3 Snippets
- bootstrap必備
Vue 2 Snippets
- vue必備
vetur
- vue高亮
background
- 一個萌萌的插件，可以自己設置vsc的背景圖
Live Server
服務器
open in?Browser
瀏覽器打開
Bracket Pair Colorizer
括號顏色匹配
React Native Tools
react必備
Code Spell Checker
檢測寫代碼時錯詞
Nest Comments
可以覆蓋注釋一段有代碼注釋的代碼 ? ctrl+alt+/
htmltagwrap
一鍵添加外圍標簽 /Alt?+?W ? 默認p，可調整為div
javascript console utils
一鍵添加console.log() / shift+ctrl+l
額外 插件列表
名稱?? ?簡述
Auto Close Tag?? ?自動閉合HTML標簽
Auto Import?? ?Typescript自動import提示
Auto Rename Tag?? ?修改HTML標簽時，自動修改匹配的標簽
Beautify css/sass/scss/less?? ?css/sass/less格式化
Better Align?? ?對齊賦值符號和注釋
Better Comments?? ?編寫更加人性化的注釋
Bookmarks?? ?添加行書簽
Bracket Pair Colorizer?? ?用不同顏色高亮顯示匹配的括號
Can I Use?? ?HTML5、CSS3、SVG的瀏覽器兼容性檢查
Code Runner?? ?運行選中代碼段(支持大量語言，包括Node)
Code Spellchecker?? ?單詞拼寫檢查
CodeBing?? ?在VSCode中彈出瀏覽器并搜索，可編輯搜索引擎
Color Highlight?? ?顏色值在代碼中高亮顯示
Color Info?? ?小窗口顯示顏色值，rgb,hsl,cmyk,hex等等
Color Picker?? ?拾色器
Dash?? ?集成Dash
Debugger for Chrome?? ?調試Chrome
Document This?? ?注釋文檔生成
ESLint?? ?ESLint插件，高亮提示
EditorConfig for VS Code?? ?EditorConfig插件
Emoji?? ?在代碼中輸入emoji
File Peek?? ?根據路徑字符串，快速定位到文件
Font-awesome codes for html?? ?FontAwesome提示代碼段
Git Blame?? ?在狀態欄顯示當前行的Git信息
Git History(git log)?? ?查看git log
GitLens?? ?顯示文件最近的commit和作者，顯示當前行commit信息
Guides?? ?高亮縮進基準線
Gulp Snippets?? ?Gulp代碼段
HTML CSS Class Completion?? ?CSS class提示
HTML CSS Support?? ?css提示(支持vue)
HTMLHint?? ?HTML格式提示
htmltagwrap?? ?包裹HTML
Import Cost?? ?行內顯示導入(import/require)的包的大小
Indenticator?? ?縮進高亮
IntelliSense for css class names?? ?css class輸入提示
JavaScript (ES6) code snippets?? ?ES6語法代碼段
JavaScript Standard Style?? ?Standard風格
JSON to TS?? ?JSON結構轉化為typescript的interface
JSON Tools?? ?格式化和壓縮JSON
Less IntelliSense?? ?less變量與混合提示
Lodash?? ?Lodash代碼段
Log Wrapper?? ?生產打印選中變量的代碼
MochaSnippets?? ?Mocha代碼段
Node modules resolve?? ?快速導航到Node模塊
Code Outline?? ?展示代碼結構樹
Output Colorizer?? ?彩色輸出信息
Partial Diff?? ?對比兩段代碼或文件
Path Autocomplete?? ?路徑完成提示
Path Intellisense?? ?另一個路徑完成提示
PostCss Sorting?? ?css排序
Prettify JSON?? ?格式化JSON
Project Manager?? ?快速切換項目
Quokka.js?? ?不需要手動運行，行內顯示變量結果
REST Client?? ?發送REST風格的HTTP請求
React Native Storybooks?? ?storybook預覽插件，支持react
React Playground?? ?為編輯器提供一個react組件運行環境，方便調試
React Standard Style code snippets?? ?react standar風格代碼塊
Sass?? ?sass插件
Settings Sync?? ?VSCode設置同步到Gist
Sort Typescript Imports?? ?typescript的import排序
Sort lines?? ?排序選中行
String Manipulation?? ?字符串轉換處理(駝峰、大寫開頭、下劃線等等)
SVG Viewer?? ?SVG查看器
Syncing?? ?vscode設置同步到gist
TODO Parser?? ?Todo管理
TS/JS postfix completion?? ?ts/js后綴提示
TSLint?? ?TypeScript語法檢查
Test Spec Generator?? ?測試用例生成(支持chai、should、jasmine)
TypeScript Import?? ?TS自動import
TypeSearch?? ?TS聲明文件搜索
Types auto installer?? ?自動安裝@types聲明依賴
VSCode Great Icons?? ?文件圖標拓展
Version Lens?? ?package.json文件顯示模塊當前版本和最新版本
View Node Package?? ?快速打開選中模塊的主頁和代碼倉庫
VueHelper?? ?Vue2代碼段(包括Vue2 api、vue-router2、vuex2)
filesize?? ?狀態欄顯示當前文件大小
ftp-sync?? ?同步文件到ftp
gitignore?? ?.gitignore文件語法
htmltagwrap?? ?快捷包裹html標簽
language-stylus?? ?Stylus語法高亮和提示
markdownlint?? ?Markdown格式提示
npm Intellisense?? ?導入模塊時，提示已安裝模塊名稱
npm?? ?運行npm命令
stylelint?? ?css/sass/less代碼風格
vetur?? ?目前比較好的Vue語法高亮
vscode-database?? ?操作數據庫，支持mysql和postgres
vscode-icons?? ?文件圖標，方便定位文件
vscode-random?? ?隨機字符串生成器
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"
}
}
相關文章暫無相關文章
總結
以上是生活随笔為你收集整理的vscode输入vue自动_vscode配置总结可收藏/vscode用户设置大全/vue代码模板，vscodevue...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： iso linux 内核版本号_Linu
- 下一篇： vuecli3的svgicon_vue-