注册
web

快看一看,你是不是这样使用的vscode

俗话说:“工欲善其事,必先利其器”。想要高效的编写代码,自然要先熟练的使用一款工具。


vscode设置简体中文


使用国外的工具,头等大事自然是必不可少的汉化。


按快捷键 ‘ctrl+shift+p’,在顶部出现的输入框输入‘configure language’,按回车,选择‘zh-cn’。此时,会自动安装中文插件,然后重新打开vscode就可以看到中文界面了。

image.png


vscode实用插件


选择vscode的原因,除了它的轻量之外,自然少不了它丰富的插件库。


1. Auto Rename Tag


自动修改匹配的html标签。在修改标签的时候,是不是需要修改完开始标签之后还需要修改结束标签。安装Auto Rename Tag,以后只需要修改一个标签就可以了,四舍五入就等于减少一半工作量啊。


2. Prettier


代码格式化插件,一键格式化代码,也可以设置保存自动格式化。我会将我的配置放在文章末尾。


3. code runner


可以直接js文件,在控制台输出结果。在写一些小算法的时候再也不用频繁刷新页面打印了。


image.png


4. Turbo Console Log


快捷添加 console.log,一键 注释、启用、删除 所有 console.log。调试js时候大概都会用console.log,每次手敲都很麻烦。


ctrl + alt + l 选中变量之后,生成 console.log
alt + shift + c 注释所有 console.log
alt + shift + u 启用所有 console.log
alt + shift + d 删除所有 console.log

注意,只能注释、启用、删除ctrl + alt + l生成的console.log。如果有小伙伴安装了印象笔记,ctrl + alt + l和印象笔记是冲突的。


5. css-auto-prefix


自动添加 CSS 私有前缀。
比如写完transform样式,会自动添加-webkit-、-moz-等样式。


配置


接下来便是无处不在的配置了,将我的配置贴出来,供大家参考。


文件->首选项->设置->工作台->设置编辑器,将editor的ui改为json,将配置直接粘贴进去


{
"eslint.enable": true,
"eslint.run": "onType",
"eslint.options": {
"extensions": [
".js",
".vue",
".jsx",
".tsx"
]
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"workbench.iconTheme": "material-icon-theme",
"workbench.colorTheme": "Monokai",
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"workbench.settings.editor": "json",
"editor.tabSize": 2,
//失去焦点后自动保存
"files.autoSave": "onFocusChange",
// #值设置为true时,每次保存的时候自动格式化;
"editor.formatOnSave": true,
// 在使用搜索功能时,将这些文件夹/文件排除在外
"search.exclude": {
"**/node_modules": true,
"**/bower_components": true,
"**/target": true,
"**/logs": true,
},
// #让vue中的js按"prettier"格式进行格式化
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatter.js": "prettier",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
// #vue组件中html代码格式化样式
"wrap_attributes": "force-aligned", //也可以设置为“auto”,效果会不一样
"wrap_line_length": 200,
"end_with_newline": false,
"semi": false,
"singleQuote": true
},
"prettier": {
"semi": false,
"singleQuote": true
}
},
"[jsonc]": {
"editor.defaultFormatter": "vscode.json-language-features"
}
}

快捷键


熟练的时候快捷键,可以更高效的提升敲代码的效率。我将我常用的快捷键列出,供大家参考。


ctrl + d 选中一个词 鼠标双击也可以
ctrl + f 搜索
ctrl + p 快速打开文件
ctrl + shift + [ 折叠区域代码
ctrl + shift + ] 展开区域代码
ctrl + shift + k 删除一行代码,不过我更喜欢用ctrl+x,因为一只手就可以操作

作者:前端手记
来源:juejin.cn/post/7226248402799345719

0 个评论

要回复文章请先登录注册