vs code使用

Posted 逻辑思维-质变

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vs code使用相关的知识,希望对你有一定的参考价值。

vs code使用

一.下载及安装:

1.下载:https://code.visualstudio.com/

2.安装:下一步即可

 

二.插件安装:

参考:https://blog.csdn.net/shenxianhui1995/article/details/81604818(此链接中插件带有效果图,如果此链接失效,则参考如下个人整理的插件)

参考:https://blog.csdn.net/qq_36256944/article/details/80553774    vs code 打造舒适的vue开发环境

vetur、Prettier - Code formatter和ESLint 必装

1.Chinese 语言包,这应该是大家的最爱(个人推荐)

2.Auto Close Tag 自动关闭标签 (个人推荐)

3.Auto Rename Tag 自动重命名标签 (个人推荐)

4.Beautify 格式化

5.Bracket Pair Colorizer 颜色识别括号

6.change-case 虽然 VSCode 内置了开箱即用的文本转换选项,但其只能进行文本大小写的转换。而此插件则添加了用于修改文本的更多命名格式,包括驼峰命名、下划线分隔命名,snake_case 命名以及 CONST_CAS 命名等

7.Color Info 使用此插件,你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 html 文件中右键单击选择器时,选择“ Go to Definition 和 Peek definition ”选项,它便会给你发送样式设置的 CSS 代码

8.Debugger for Chrome 前端调试

9.ESLint EsLint可以帮助我们检查javascript编程时的语法错误。比如:在Javascript应用中,你很难找到你漏泄的变量或者方法。EsLint能够帮助我们分析JS代码,找到bug并确保一定程度的JS语法书写的正确性 

10.filesize 在底部状态栏显示当前文件大小,点击后还可以看到详细创建、修改时间

11.GitLens — Git supercharged 显示文件最近的 commit 和作者,显示当前行 commit 信息

12.HTML Boilerplate 通过使用 HTML 模版插件,你就摆脱了为 HTML 新文件重新编写头部和正文标签的苦恼。你只需在空文件中输入 html,并按 Tab 键,即可生成干净的文档结构

13.HTMLHint HTML 代码格式检测

14.HTML Snippets 代码自动填充 (个人推荐)

15.htmltagwrap 在选中HTML标签中外面套一层标签 ”Alt + W” (“Option + W” for Mac) (个人推荐)

16.Image Preview 鼠标移到路径里显示图像预览

17.Indenticator 突出目前的缩进深度

18.intelliSense for CSS class names in HTML 把项目中 css 文件里的名称智能提示在 html 中

19.JavaScript (ES6) code snippets es6代码片段 (个人推荐)

20.Live Server 浏览器实时刷新

21.Node.js Modules Intellisense require 时的包提示

22.Path Intellisense 路径自动补全

23.Quokka.js Quokka 是一个调试工具插件,能够根据你正在编写的代码提供实时反馈,使用方法: ctrl+shift+p 输入 quokka 选择 new javascript 就可以了

24.Regex Previewer 这是一个用于实时测试正则表达式的实用工具。它可以将正则表达式模式应用在任何打开的文件上,并高亮所有的匹配项

25.SVG Viewer Vue 语法高亮显示, 语法错误检查, 代码自动补全(配合 ESLint 插件效果更佳) (个人推荐)

26.vscode-fileheader 顶部注释模板,可定义作者、时间等信息,并会自动更新最后修改时间快捷键: Ctrl+Alt+i(默认信息可在 文件→首选项→设置 中修改)

 

三.新建或打开项目:

新建文件一般不常用,都是通过在项目中右键新建的

常用的是打开文件夹功能

一般方式是在文件资源管理器中创建个文件夹,然后在vs code中打开文件夹即可

 

四.调试:

1.安装插件:Debugger for Chrome

2.配置Debugger for Chrome插件:

ctrl+shift+d打切换到调试窗口,最上面有下拉菜单-点击添加配置,自动生成lauch.json文件,默认不用改

3.终端-新建终端

npm run dev

4.设断点调试

 

五.使用:

设置代码自动格式化:

参考:https://blog.csdn.net/latency_cheng/article/details/80409202

1.安装全局

npm install eslint -g

2.初始化:(初始化到项目路径下)

eslint --init

根据提示选择备注:

插件是vs code 必备工具

 

以上是关于vs code使用的主要内容,如果未能解决你的问题,请参考以下文章

vs code 在终端下使用 code ./ 打开当前项目

使用VS Code发布博客

vs code使用

如何在 VS-code 中使用 Git 工作树?

markdown 使用VS Code创建项目

Pycharm VS VS Code(个人使用感受)