vscode使用

简介: vscode使用

一.配置

1.重启打开默认

Reveal If Open

2.设置字体大小

3.自动格式化

eslint:

4.设置缩进

tabsize

二.快捷键

1.快捷键

#搜当前文件

command+f

#搜全局文件

command+shift+f

#打开文件搜索

command+p

2.Ctrl+P 模式

Ctrl+P窗口下,F19+C 也可以

  • 直接输入文件名,跳转到文件
  • ? 列出当前可执行的动作
  • ! 显示 Errors 或 Warnings,也可以`Ctrl+Shift+M
  • : 跳转到行数,也可以Ctrl+G直接进入
  • @ 跳转到 symbol(搜索变量或者函数),也可以Ctrl+Shift+O直接进入
  • @:根据分类跳转 symbol,查找属性或函数,也可以Ctrl+Shift+O后输入:进入
  • # 根据名字查找 symbol,也可以Ctrl+T

3.vscode

  • F19+C 打开指令面板
  • command+, 打开设置
  • shift+option+F 格式化代码 command+option+L
  • command+shift+k 删除当前行
  • command+e 新建终端
  • command+\ 拆分终端
  • command+x 剪切相当于删除当前行

4.光标到底部

  • command+下
  • command+end

5.同步 idea

6.向上向下全选

三.git 提交

1.提交代码

2.push 失败

git不能push:一般是没有权限了,需要使用以下命令,下次 push 或者 pull 的时候重新输入账号密码即可

sudo git config --system --unset credential.helper

四.插件与主题

1.常用插件

  • Markdown Preview Enhanced 预览插件
  • SQLTools 数据库连接工具
  • Path Intellisense 路径补全
  • Rainbow Brackets 括号提示
  • Color Highlight 颜色插件
  • Color Info 颜色提示
  • HTML Boilerplate html 补全插件
  • Indent-Rainbow 括号缩进
  • Prettier - Code formatter 代码格式化
  • Css peek css 插件
  • IntelliJ IDEA Keybindings idea 快捷键绑定
  • VSCode Great Icons 图标插件
  • eslint 代码规范
  • Prettier - Code formatter 自动格式化
  • Copy file name 复制文件名
  • Chinese //中文
  • Project Manager
  • Markdown All in One
  • Markdown Preview Enhanced
  • Auto Close Tag //自动闭合标签
  • colorful comments //彩色备注
  • eslint //代码规范
  • gitlens -git supercharged //显示代码提交人
  • html css support 语法提示
  • js code snippets 语法提示
  • live Server 启本地服务,浏览器可直接显示编译的结果
  • one Dark pro 主题
  • open in browser 字面意思
  • path intellisense 智能路径
  • prettier-Code formatter 格式化
  • vetur 语法提示
  • Vue language features (volar) 语法提示
  • Bracket Pair Colorizer //彩色括号
  • markdownlint
  • Meterial Icon Theme
  • Material Theme Icons
  • anyrule 正则表达式 fn+F1

2.主题

  • Dracula Official

3.设置主题

4.背景图片

  • 安装插件
  • 设置图片
  • 设置透明度
  • 关闭背景图片

background-cover

![image-20230712183423784](http://qinyingjie.top/blogImg/image-20230712183423784.png)

五.终端

1.多 sh 并列

2.文件检索

command+p

3.终端中文乱码

  • F19+c
  • configure language
  • 不能选择非官方的

六.常见问题

1.去除空行

使用正则表达式匹配切换,去除空行

^\s*(?=\r?$)\n

2.prettier 配置

我这边遇到的最多的问题有这三个:

1、prettier 会默认把 单引号变成双引号,然后eslint校验报错


2、js 每行代码后面会加一个 分号,然后eslint校验报错


3、函数结束之后会加一个逗号,然后eslint校验报错

这样的话有两种解决方式,第一个改 eslint,让它的校验改成双引号,支持分号

第二种,改 prettier,让它符合 eslint 的校验方式

毫无疑问,我们选择第二种,毕竟我们是用 eslint 来校验,如果你把它规则都改了,它校验也就失去了意义!

代码。准备好了,直接建一个 .prettier 文件夹,抄进去就行了

module.exports = {

 printWidth: 100,

 tabWidth: 2, // 超过最大值换行

 semi: false, // 结尾不用分号

 singleQuote: true, // 使用单引号

 disableLanguages: ["vue"], // 不格式化vue文件,vue文件的格式化单独设置

 htmlWhitespaceSensitivity: "ignore",

 trailingComma: "none", // 函数后面不加逗号,如果不写这一个,在methods 最后一个函数也会加逗号,eslint会报错,多了一个逗号

};

3.定位文件

双击可以定位文件

4.设置目录列表


相关文章
|
Web App开发 JavaScript 前端开发
VSCode
5月9日 · 306 人阅读 visual studio code 配置vue开发环境 前端 visual-studio-code vue-cli 插件 废话 重装了用了3年的操作系统,配置前端开发环境时一些开发工具配置丢失了,这里做下记录,我精简了一遍插件,确保都用得上,且功能不重叠。
1991 0
|
IDE 编译器 Linux
VScode的使用——“VSCode”
VScode的使用——“VSCode”
|
9月前
|
JSON Linux Shell
vscode c++ 使用问题汇总
vscode c++ 使用问题汇总
259 0
|
C++
vscode奇淫记(上)
每次换editor都是一种煎熬,从最早的eclipse,sublime,webstorm到现在在用的atom,换编辑器的驱动是寻找更酷炫和轻量的平衡点,其实我真的蛮喜欢atom的,酷炫!那我这次打算入手vscode的原因有以下几点 部门同事基本上都在用它 ╯□╰ 社区和atom一样活跃(最诱惑我的地方是写node能打断点以及ts编译的速度) 今天atom全局搜索存在的包文件竟然没找到!! 说换一种editor是一种煎熬是因为你需要配置样式和插件并掌握部分快捷键和高级功能,下面我会介绍一些入坑奇淫记。
1806 0
|
9月前
vscode中可能遇到的一些问题
vscode中可能遇到的一些问题
339 1
|
前端开发 PHP 开发工具
vscode 使用小结
vscode 使用小结
|
9月前
|
Ubuntu 网络安全 开发工具
vscode使用
vscode使用
155 1
|
Unix Linux Shell
如何正确的使用VSCode
如何正确的使用VSCode
129 0
|
存储 IDE 开发工具
WebStorm 和 VsCode 的结合体来了!
虽说 Jetbrains 公司推出的编辑器都很好用,但超级占用内存这个缺点劝退了无数人(收费可能劝退了更大一部分人),转头使用免费且轻量的VsCode的人不占少数。
351 0
WebStorm 和 VsCode 的结合体来了!

热门文章

最新文章