VScode设置

本文详细介绍了VSCode的下载安装、中文配置、常用插件安装、文件操作、设置自定义快捷键、修改默认浏览器、开启自动提示以及自定义Vue代码补全的步骤。涵盖了从基础设置到高级功能的全方位教程,帮助开发者提升VSCode使用体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、下载安装

2、配置中文

安装完之后会有提示安装中文插件,或者扩展插件中搜索chinese,然后安装

手动切换流程也并不复杂,可使用以下三个步骤手动切换

按下 ctrl + shift + P(Mac 版请按下 cmd + shift + P)

输入 display language 就会跳出 “Configure Display Language”

选择安装的语系 “zh-cn” 即可安装

3、VSCode常用插件

3.1 Auto Close Tag (自动闭合HTML/XML标签)

3.2Beautify (格式化 html ,js,css)

 3.3Bracket Pair Colorizer(给括号加上不同的颜色,便于区分不同的区块)

 3.4 HTML CSS Support (智能提示CSS类名以及id)

 3.5 Icon fonts(图标字体)

 

3.6 open in browser(右键快速在浏览器中打开html文件)

  

3.7 Vetur(Vue多功能集成插件,错误提示等) 

3.8Live Server(在 vscode 中就可以直接启动一个本地服务,并且能监听文件变化自动刷新网页)

 3.9Visual Studio IntelliCode(微软推出的一款代码智能提示插件,和别的插件不同的是,采用的是 AI 技术,吸收了 github 上成千上万的优秀代码,还会结合你日常的编码习惯不断学习进化)

3.10 eslint 能够检测代码语法问题,与格式问题,对项目代码风格统一至关重要。

3.11 Vue 3 Snippets  vue常用参数补全

3.12  Vue VSCode Snippets常用参数补全(和上面的提示功能相似,可以自己对比下载)

 

 4、创建文件夹

vscode是没办法直接在工具上创建文件夹的,必须要在电脑创建项目名称,打开之后才可以创建文件夹。同样根目录也是没办法直接删除的,要从电脑上删除掉才可以。 

4.1首先在电脑上创建文件夹,也就是项目的名称,打开vscode并打开之前创建的文件夹,如下页面,此时就可以在根目录下创建新文件夹了

 5、创建html文件

step1

step2

step3 在html文件上输入【!】叹号,然后按键盘的【Tab】建 

 

可以点击【文件】然后点击【保存】或者按快捷键【ctrl+s】进入保存界面,【输入html文件名称】,选择html的后缀【html】,最后点击保存, 此种方法找扩展名比较麻烦,推荐用第一种方式

6、修改默认浏览器

选择文件—首选项—设置,在搜索栏输入open-in-browser.default,出现以下在编辑框中编辑
会看到右侧多了工作区设置,如你想默认谷歌打开,那就设置默认浏览器为Chrome,如果是火狐,就设置Firefox

7、设置自动提示

VSCode的快捷键是Ctrl+space!和windows系统默认设置冲突

文件 - 首选项 - 键盘快捷方式 !会打开快捷键界面

 调出界面!直接在键盘输入你要设置的快捷键方式!然后按enter!  我设置的是Alt+/

8、自定义vue代码补全

<think>嗯,用户问的是如何在VSCode设置bashrc,我需要先理清楚这个问题的各个方面。首先,用户可能是在使用VSCode时遇到终端配置的问题,或者想自定义他们的bash环境。需要确定他们的操作系统,因为同系统下bashrc的位置可能同,比如Linux和Windows的WSL。 接下来,用户可能太清楚如何在VSCode中正确配置终端使用bash,或者他们修改了bashrc但发现VSCode的终端没有生效。这时候需要解释如何检查VSCode的终端设置,确保它使用的是bash而是其他shell,比如zsh或PowerShell。 另外,可能需要指导用户如何修改bashrc文件本身,比如添加环境变量、别名或函数。这里要提醒用户保存文件后需要重新加载配置,或者重启终端才能使更改生效。同时,要注意路径问题,特别是如果VSCode是从图形界面启动的,可能会继承所有环境变量,这时候建议通过命令行启动VSCode或者调整启动脚本。 还要考虑到用户可能遇到的常见问题,比如终端无法识别bash命令,这可能是因为默认shell被更改了。需要教他们如何检查默认的shell,并在VSCode设置中指定bash的路径。对于Windows用户,可能需要说明WSL的配置方法,以及如何正确设置终端为WSL的bash。 最后,应该给出一些实际的例子,比如如何设置别名或PATH变量,这样用户可以直接应用。同时,提醒他们在修改前备份bashrc文件,避免出错。可能还需要提到调试的方法,比如在bashrc中加入echo语句来测试是否被加载。 总之,回答需要分步骤,结构清晰,覆盖常见的操作系统,提供具体的操作命令和示例,并且预见到用户可能遇到的问题,给出解决方案。确保用户能够按照指导一步步完成设置,并验证是否成功。</think>在VSCode中配置bashrc的完整步骤指南: 1. 定位bashrc文件 - Linux系统:`$HOME/.bashrc` - WSL系统:`/home/用户名/.bashrc` - macOS(使用bash):`~/.bash_profile`或`~/.bashrc` 2.VSCode中编辑bashrc ```bash # 使用VSCode内置终端快速打开 code ~/.bashrc ``` 或通过VSCode资源管理器直接导航到文件 3. 终端集成配置 在VSCode设置中(JSON格式): ```json { "terminal.integrated.profiles.linux": { "bash": { "path": "/bin/bash", "args": ["--login"] // 确保加载bashrc } }, "terminal.integrated.defaultProfile.linux": "bash" } ``` 4. 常用配置示例 ```bash # 环境变量 export PATH="$PATH:/your/custom/path" # 别名设置 alias ll='ls -alF' alias gs='git status' # 函数示例 md(){ mkdir -p "$1" && cd "$1" } ``` 5. 配置生效方式 - 重新加载终端:执行`$$ source ~/.bashrc $$` - 或重启VSCode终端(Ctrl+Shift+`) 6. 调试技巧 - 在bashrc开头添加: ```bash echo "[DEBUG] .bashrc loaded" # 验证文件是否被加载 ``` 7. 注意事项 ❗ 修改前建议备份:`$$ cp ~/.bashrc ~/.bashrc.bak $$` ❗ 如果使用WSL,确保VSCode的默认终端设置为WSL ❗ 图形界面启动的VSCode可能会继承所有环境变量,可通过命令行启动: ```bash code . ``` 常见问题排查: 1. 修改未生效 &rarr; 检查终端是否实际使用bash 2. 路径错误 &rarr; 使用`$$ echo $PATH $$`验证 3. 语法错误 &rarr; 通过`$$ bash -n ~/.bashrc $$`检查语法 高级配置建议: - 使用`$$ [ -f ~/.bash_aliases ] && . ~/.bash_aliases $$`分离配置 - 添加条件判断防止重复加载: ```bash if [ -z "$BASHRC_LOADED" ]; then export BASHRC_LOADED=1 # 其他配置 fi ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值