vscode编辑器配置
一、配置
1、打开默认配置文件
ctrl + shift + p 输入 open default settings
2、导出配置文件
ctrl + shift + p 输入 export
3、导入配置文件
ctrl + shift + p 输入 import
4、鼠标滚轮控制编辑区字体大小
设置中搜索mousewheel开启即可
5、菜单栏字体大小
设置中搜索Zoom Level进行倍数放大
6、快捷键搜索
二、插件
1、Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
编辑器汉化插件
2、open in browser
在浏览器中打开html资源
3、Auto Rename Tag
自动重名米标签
4、Live Server
静态文件服务器
5、Path Intellisense
文件路径智能提示
6、Markdown Preview
实时预览
7、Prettier - Code formatter
代码格式化
8、code runner
使用node快速执行js代码
9、vetur
[vue2使用]
10、volar
[vue3使用]
11、VueHelper
vue语法提示
12、Turbo Console Log
对框选内容快速生成打印日志代码快
ctrl + alt + L
13、GitLens
git仓库文件状态追踪插件
14、Auto Import
自动优化导入
15、Todo Tree
todo列表追踪
16、Regex Previewer
正则结果可视化预览
17、px to rem
像素单位转换
18、SVG View
svg图片预览
19、Settings Sync
配置同步
20、IntelliJ IDEA Keybindings
vscode中启用idea intllij编辑器快捷键映射
用法
21、JavaScript (ES6) code snippets
es6语法检测+自动识别
三、插件批量迁移
进入C:\Users\用户名\.vscode
将当前目录下的extensions文件夹复制到目标主机上的相同路径即可
四、配置node语法提示
npm install --save-dev @types/node
五、新建代码用户片段
vscode
新建代码用户片段目的为了以后方便开发,快捷输出全局代码片段。
打开vscode 点击“文件”>“首选项”>“用户片段”,点击“新建全局代码片段文件”,按需求输入自己想输入的用户代码片段。
{
// Place your vue-basic 工作区 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
// used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
// Placeholders with the same ids are connected.
// Example:
"Print to console": {
"scope": "javascript,typescript",
"prefix": "vm",
"body": [
"var vm = new Vue({",
"el: '#root',",
"data: {",
"",
"},",
"methods: {",
"",
"},",
"computed: {",
"",
"}",
"})"
],
"description": "Log output to console"
}
}
“prefix”: “vm”, 为要输入的快捷代码,输入后按“tab”键,body里为你想要输出的内容。