与Webstorm
之前写了一篇Webstorm的配置,参考同学的建议,vscode可能使用的人更多,所以配置了一个vs来试用看看。因为是从Webstorm转过来,所以后面VS配置都会习惯偏向它,并与Webstorm做对比。
一直用不习惯的是全文搜索,还是更喜欢webstrom弹窗式的,还可以显示上下文。包括其他的配置,vs全部都不是弹窗式,还得手动去关闭。对于我喜欢界面打开文件少的人,很难受。
还有一些本人习惯常用的vs没有的功能:
- Terminal:web链接不能点击打开
- 一键重启
- Atl+F12 / Shift +12查看代码引用与定义,焦点失去时弹窗不会自动关闭
- ctrl + b 不能 跳转到定义或者引用,跳转到创建的文件
- 代码跳转
- ctrl + / 注释之后,不能直接跳转到下一行
对比下webstorm确实很吃内存,打开相同项目,webstrom用了2个G,vs只用了227MB。不过对于大内存的家伙来说,应该不算个事。嘿嘿~~
使用了几天后,发现vscode的插件(猜测)也在偷偷吃内存,㘈~~,vscode要想用得好,没了插件不成。那~~,跟webstorm相差有可能不上下。
护眼色:
1)Ctrl +Alt + x打开 :插件安装,搜索:Atom one light theme, 然后点击安装
2)Ctrl + Alt + p 打开:搜索:user settings json, 打开 Preference-user Setting json
在{}最后加上逗号,然后加上配置背景护眼色
"workbench.colorCustomizations": {
"[Atom One Light]": {
"editor.background": "#C7EDCC",
"sideBar.background": "#C7EDCC",
"activityBar.background": "#C7EDCC",
},
}
三、针对该主题进行修改
回到setting.json文件,在字体设置代码块(就是刚才写的代码后面的大括号里)内输入英文引号,以我的默认深色主题为例,在给出的代码提示里选择【Default Dark+】。
在【Default Dark+】后面的大括号里继续输入英文引号,把给出的提示都选择一遍,同样要注意每一个语句后面要加逗号,如下图所示。
把鼠标移动到每个代码上,会有提示告诉你这一行是设置哪一部分的颜色。鼠标指向后面的颜色代码,会弹出一个颜色选择器,根据需要选择自己喜欢的颜色即可。
我这里遇到了一个bug,就是不管你鼠标指向哪个颜色设置,修改的都是第一行【comments】处的颜色,无奈之下我将颜色设置的代码全部都注释掉,然后一行一行取消注释再修改才解决问题。
这里我再写一下每行的对应的区域
“comments”:注释颜色
“functions”:函数/方法定义与引用颜色
“keywords”:关键字颜色,如new, if, else, try等
“numbers”:数字的颜色
“strings”:字符串的颜色
“types”:类型定义与引用的颜色
“variables”:变量的颜色
“textMateRules”:其他具体的颜色设置
这里的【textMateRules】放到后面说。
textMateRules代码块的编辑
可以根据需要配置各种位置上字符颜色。
这里先放一下我的设置,我后面根据这个解释
"textMateRules": [
{
"scope": "keyword.control",//if ,else, try 等控制符
"settings": {
"foreground": "#C586C0"
}
},
{
"scope": "keyword.operator",//算数符
"settings": {
"foreground": "#f07d3b"
}
},
{
"scope": "storage.modifier",//修饰语
"settings": {
"foreground": "#f09090"
}
},
{
"scope": "entity.name.type.class",//类名
"settings": {
"foreground": "#c0526a"
}
},
{
"scope": "storage.type.primitive.java",//int和其他啥啥,忘记了
"settings": {
"foreground": "#c0526a"
}
},
{
"scope": "entity.name.type.interface",//接口
"settings": {
"foreground": "#c0526a"
}
},
{
"scope": "entity.name.namespace",//导入部分
"settings": {
"foreground": "#74817c"
}
},
{
"scope": "entity.name.tag",//html标签
"settings": {
"foreground": "#d35c5c"
}
}
]
这里的每一块代表一个具体的代码颜色设置,具体的意思是颜色设置的应用范围比较精确。
代码中的"scope"表示下面"settings"的应用范围,上面代码中用到的我已经标了注释,需要修改的话直接搬过去就好。
如果里面没有你要找的部分,你可以打开你的项目代码页面,
按【F1】,
搜索【developer:inspect editor tokens and scopes】打开标记作用域查看器,
之后点击代码中你要修改颜色的地方,查看【foreground】处的作用域,复制下来粘贴到【settings.json】"scope"后的引号里,就可以把颜色设置应用到对应位置。
快速生成vue模版文件:
1. 用快捷Ctrl + Shift + P唤出控制台
2,然后输入“snippets”并选择
2.接着输入vue,
vs code自动生成vue.json文件。
3. 将vue.json文件改为下面得模板(可以根据个人需求修改当中的模板内容)
{
"Print to console": {
"prefix": "vue",
"body": [
"<template>",
" <div">$0</div>",
"</template>",
"",
"<script>",
"export default {",
" components: {},",
" props: {},",
" data() {",
" return {",
" };",
" },",
" watch: {},",
" computed: {},",
" methods: {},",
" created() {},",
" mounted() {}",
"};",
"</script>",
"<style lang=\"scss\" scoped>",
"</style>"
],
"description": "A vue file template"
}
}
然后新建一个 vue 文件,输入“vue”,按下回车键或者Tab键,模板就自动生成了:
打开的文件平铺展开,不覆盖: 只能打开一个文件问题解决
1. Ctrl+Shift+p快捷键打开json设置
2. 在 json 设置中添加以下两行或将对应属性设置成 false/true
"workbench.editor.enablePreview": false,
"workbench.editor.showTabs": true
配置完成后的文件:
保存当前json文件,再打开文件就不会覆盖原来的窗口了。
高效好用插件
1 . Git Lens
安装之后 把他拖到第2个Side bar,然后再拖到下面跟Terminal一直,设置只显示 Remotes, Branches, Commits, Commit Detals这几个窗口,一配置跟Webstorm差不多一样了。
HTML
Auto Close Tag
自动闭合HTML/XML标签,必装
Auto Rename Tag
修改标签时自动重命名配对的HTML / XML标签,必装
VUE开发推荐插件
Vetur
Vue2语法高亮、智能感知、Emmet等
包含格式化功能, Alt+Shift+F (格式化全文),Ctrl+K Ctrl+F(格式化选中代码,两个Ctrl需要同时按着)
安装完之后:
VS Code工具的时候,右下角总是会弹出一个告警弹框,内容为 “ Vetur can't find `tsconfig.json` or `jsconfig.json` in E:\VS_CODE\...\project-name ”大概率意思是,在当前加载的项目中Vetur插件没有加载/找到 “tsconfig.json”或者“jsconfig.json”文件,如下图:
User > Extensions > Vetur 找到 Ignore Project Warning 项勾选即可“Vetur will warn about not setup correctly for the project,You can disable it.”,如下图:
Volar
Vue3语法高亮、智能感知、Emmet等
VueHelper
提供Vue、Vue-router、Vuex的代码片段补全功能
Vue 3 Snippets
生成Vue3代码片段,在页面中输入vuein,然后按Tab
vue-component
输入组件名称自动导入找到的组件,自动导入路径和组件
Vite
能自动启动开发服务器,允许开发者无需离开编辑器即可预览和调试应用
js&ts
JavaScript(ES6) code snippets
包含十几个代码片段,快速生成 ES6 代码片段
其他
ESLint
检查Javascript编程时的语法错误,必装。
Stylelint
显示css代码错误、修改建议,还能保存时自动美化代码、修复可修复的代码。
Live Server:
open in brower这个插件,可以直接右键选择使用浏览器渲染html文件。可是我这里不推荐这个插件。这种打开方式是“本地打开方式” ,无法在Chromer 进行 vue debugger插件使用调试,那么我们怎么以(类Node.js或者Tomcat)服务器的方式打开:
最后强烈推荐:
然后现在 vs code 中有个插件叫 Live Server,不需要上面的方法就可以直接在以服务器模式在浏览器中打开,很方便!!
右键选择:Open with Live server 。
这样我们就能像webstorm等IDE这样在本地方便的使用 ajax 或者 vue-resource 等功能
高效快捷键
Ctrl + G 跳转至某行
Ctrl + home 跳转至顶部
Ctrl + end 跳转至底部
SHIFT + ALT + ↑箭头 复制本行向上粘贴
SHIFT + ALT + ↓箭头 复制本行向下粘贴
option+shift + ↑箭头 复制本行向上粘贴(mac)
option+shift + ↓箭头 复制本行向下粘贴(mac)
Tab 增加缩进
Shift+Tab 减少缩进
Ctrl + \ 当前拆分模块
Ctrl + W 关闭当前拆分模块
Ctrl + J 关闭/打开vsCode终端
//Ctrl + 2,3,4 关闭/打开vsCode终端
command + P 输入打开文件
块注释:alt+ Shift + A
单/多行注释:Ctrl + /