科百科
当前位置: 首页 范文大全

vscode基础代码教程(Vscode高效开发技巧)

时间:2023-06-05 作者: 小编 阅读量: 1 栏目名: 范文大全

Vscode高效开发技巧VscodeIDE1.下载安装vscodevscode官网下载,下载安装即可2.代码编辑技巧2.0Help---命令帮助CtrlShiftP查看所有快捷键2.1打开CtrlShiftN新建窗口Ctrl。

Vscode IDE

1. 下载安装vscode

vscode官网下载,下载安装即可。

2. 代码编辑技巧

  • 2.0 Help---命令帮助

CtrlShiftP 查看所有快捷键

  • 2.1 打开

CtrlShiftN 新建窗口CtrlShiftW 关闭窗口

  • 2.2 打开Terminal

Ctrl ` 打开终端或点击左下角三角和❌号位置

  • 2.3 注释

Command/ (win Ctrl/)

-2.4 行复制与粘贴

Ctrl C 复制行Ctrl X 剪切行

  • 2.5 查找与替换

CtrlF 查找CtrlH 替换AltEnter 选择查找所匹配的所有内容CtrlP 查找文件名并快速打开CtrlG 查找行提示:见下图1) 匹配大小写,2) 匹配整个单词1) 替换当前,2) 替换全部

查找

替换

  • 2.6 格式化代码

OptionShiftF (win AltShiftF)

  • 2.5 上下平移行内容

Option上下方向键 移动光标行代码 (win Alt上下方向键)

  • 2.7 移动光标

移动到行首 command左方向键 (win Home)移动到行尾 command右方向键 (win End)移动到文档的开头 command上方向键 (win CtrlHome)移动到文档的末尾 command下方向键 (win CtrlEnd)回到光标上次的位置 commandU

  • 2.8 区块折叠与展开

Ctrl Shift [ 折叠区块Ctrl Shift ] 展开区块

3. 项目中Vscode统一配置文件

目的:通过项目文件在工作区(workspace)进行统一配置;

.vscode 在根目录下创建该文件夹;

settings.json 在文件夹下创建该配置文件.

// settings.json{ // tab 大小为2个空格 "editor.tabSize": 2, // 编辑器换行 "editor.wordWrap": "off", // 保存时格式化 "editor.formatOnSave": true, // 开启 vscode 文件路径导航 "breadcrumbs.enabled": true, // prettier 设置语句末尾不加分号 "prettier.semi": false, // prettier 设置强制单引号 "prettier.singleQuote": true, // 选择 vue 文件中 template 的格式化工具 "vetur.format.defaultFormatter.html": "js-beautify-html", // vetur 的自定义设置 "vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_attributes": "aligned-multiple" }, "prettier": { "singleQuote": true, "semi": false, "printWidth": 100, "wrapAttributes": false, "sortAttributes": false } }}

4. 必备插件

Auto Close TagAuto Rename TagBracket Pair ColorizerColor HighlightHTML SnippetsHTML CSS SupportHTMLHintfile-iconsJavaScript (ES6) code snippetsMaterial Icon ThemeGitLens eslintvueurVue 2 SnippetsVue PeekVueHelperNode modules resolveOpen inBrowser —— 在浏览器打开Code Runner —— 右键运行js代码 或 使用node a.jsImport Cost —— 分析引入库的大小,如jQueryProject Manager —— 项目管理,左侧增加一个文件管理菜单 code ./vscodeCommandShiftP 或 F1 ( win CtrlShiftP ) 选择Project Manager: Save Projectvscode-icons —— 标识文件类型图标Chinese —— 汉化vscode,重启一下Better Solarized Dark —— 主题,绿色gitignore —— 忽略文件

右键gitignore

5. Eslint检测,待补充!!!

npm i -g eslinteslint --init 一系列配置一系列配置自动修复等。。。

,
    推荐阅读
  • 毕节社保参保人员变更办理指南(毕节社保参保人员变更办理指南在哪里)

    毕节市社保参保人员变更办理是针对毕节市单位社保的办事流程,在企业或单位参保人员信息发生变化是,单位经办人需及时到社保中心去办理相应手续!办理条件1、毕节市参保用人单位与劳动者建立或解除了用工关系2、所处的参保单位所用的名称、地址、法定代表人出现变更情况的本文标签:毕节市参保单位社保人员上一篇:毕节社保转移指南毕节社会保险事业局下一篇:毕节社保补缴指南

  • 汽车维修保养小常识(收下这六个保养汽车的小技巧)

    日常生活中,汽车越来越多,汽车久了,总会或多或少出现一些小问题,而汽车日常保养成了关键部分。平时自己的一些小保养,可能会事半功倍,给你节约很多银子。如果热车不抖动但换挡不顺(手挡),则有可能是喷油嘴喷油量不匀,需要检测、清洗。

  • 日常生活中要注意哪些问题?(日常生活中的注意事项)

    日常生活中要注意哪些问题多吃纤维素。如水果和新鲜蔬菜,有便秘的患者尤其要注意这点,保持排便通畅,排除体内毒素,减少汗液中的毒素排出也是减轻腋臭味的一个方法。日常多锻炼可提高身体免疫力,加强新陈代谢的能力。尤其是在炎热的夏季尽可能的呆在凉爽的环境中。平时在生活中,要养成良好的卫生习惯,要勤洗澡,勤换衣物、袜子,保持局部清洁干燥。还要定期的换洗传单被褥。

  • 微信屏蔽朋友圈是什么样子(微信屏蔽朋友圈是什么样子是什么意思)

    1、微信朋友圈被人屏蔽了是看不到对方的朋友圈状态,在对方朋友圈页面只能看到一条线(有”个人相册“但看不见照片),如果对方发了朋友圈动态,在自己朋友圈也不会展现出来,那就一定是被屏蔽了,都无法看到对方的朋友圈动态,只能通过聊天窗口进行聊天。2、屏蔽朋友圈,对方就无法再看到自己更新的朋友圈了,只会显示,但是自己仍然可以去看对方的朋友圈内容。如果是对方没有发朋友圈的话,就会连个人相册那一栏都会没有的。3

  • 家用生铁锅好还是用熟铁锅好(为什么越来越多人喜欢用熟铁锅)

    熟铁锅含碳量低,所以可塑性强,韧度高,但同时存在易变形的缺点。除此之外,用熟铁锅炒菜还更加节省燃气。

  • 光敏印章怎么加印油(光敏印章加印油方法有哪些)

    将印油涂在突出部位因为印油对印章有腐蚀性,减少章内剩余印油可延长印章寿命所以最好充用此方法根据使用量加入适量印油涂抹后印油会很快被吸收掉,反复涂抹根到够用后,在废纸上按压几次即可,下面我们就来聊聊关于光敏印章怎么加印油?光敏印章怎么加印油将印油涂在突出部位。因为印油对印章有腐蚀性,减少章内剩余印油可延长印章寿命。此种方法需注入大量印油,让印油充分渗透到底部,若使用量不大,不建议使用此方法。

  • 初中生骑车撞人其父需赔200(初中生骑车撞人致残)

    7月21日,江苏省高院公布该案详情,吴林父亲向伤者赔偿各项损失费用238万余元,其母需对前夫不能清偿部分承担连带责任。2022年4月,经法医鉴定,陈某因交通事故构成一级伤残。陈某的妻子作为陈某的法定代理人,向江阴市法院起诉吴林及其父母,要求赔偿各项损失200余万元。法院经审理认为,吴林因违规驾驶电动车造成陈某受伤且负该事故的全部责任,故其对陈某的各项损失费用应承担全部赔偿责任。

  • 马齿苋的作用与功效有哪些(马齿苋的作用与功效有什么)

    接下来我们就一起去了解一下吧!马齿苋的作用与功效有哪些马齿苋有清热利湿、解毒消肿、消炎、止渴、利尿的功效与作用。一般用于热毒血痢,痈肿疔疮,湿疹,丹毒,蛇虫咬伤,便血,痔血,崩漏下血。

  • 牛肚用高压锅压多长时间 牛肚一般高压锅压几分钟

    牛肚用高压锅压多长时间30分钟左右。做法:1、将牛肚洗净后,用沸水汆烫过后备用。