一、常用设置：

1、设置tab为2空格

用户首选项 =》设置 => 直接搜索editor.tabSize 设置为2

2、设置换行采用\n形式

用户首选项 =》设置=> 直接搜索files:eol进行设置为\n。

如果文件已经是\r\n了，可以通过下图的方式进行转换

二、vs code 常用插件

安装方法：点击vscode左侧扩展，搜索插件，点击安装

Path Intellisense 可以查找文件路径
Auto Rename Tag 改变开始标签自动修改结尾标签
Document This js 的注释模板( 按两次 Ctrl+Alt+D ，只在js文件中有效)
beautify 格式化代码的工具（如果使用了ESLint ，格式话出来的可能不符合ESLint 规则，建议不安装）
AutoFileName 文件路径自动补全插件
eslint 添加对 eslint 的支持；stylelint 添加对stylelint的支持；配置保存时自动修复: vscode 配置保存时运行eslint、stlyelint并自动fix_supming1的专栏-CSDN博客
vscode-stylelint 添加对stylelint支持
Project Manager 项目管理器插件，可以在你的编辑器中快速切换项目

按F1，输入pm会出来相关的命令

打开文件件，选择响应的save命令进行保存，后续才能打开

如果项目管理中用到git，可以安装git相关插件，这里有一篇文章介绍的比较详细：VSCode Git 相关的工具和插件 - 6小贱 - 博客园
Settings Sync 设置同步插件( 方法参考：Visual Studio Code 设置同步到github的插件介绍及使用方法(Settings Sync)_廿四桥明月夜的博客-CSDN博客 )
Align 使代码根据 =，: 等对齐（如果使用了ESLint ，格式话出来的可能不符合ESLint 规则，建议不安装）
npm Intellisense 在 import 导入语句中自动完成npm 模块。npm Intellisense
Material Icon 文件夹图标插件, 用于比较显眼地区分各种文件、文件夹
Vetur vue开发者才需安装，包含语法高亮、代码片段、Emmet、代码格式化、错误检测功能
project-tree 自动生成项目目录文件结构 VScode自动生成项目目录文件结构

vue 3 推荐插件 Volar 参考 Volar - vue终极开发神器！ - 知乎

vscode 小程序开发环境参考：

开发微信小程序环境配置(vscode) - _fn - 博客园

vscode 开发小程序wxss和js可以采用stylelint和eslint进行格式校验和格式化，wxml没有看到整合相关lint的资料，不过找到了wxml-vscode 插件（注意作者已经不维护了,另外text组件没内容每次格式化都会多出一个换行）可以进行格式化 https://github.com/cnyballk/wxml-vscode

三、vs code 常用快捷

命令面板：F1（命令面板可以执行相应插件）
重命名：F2
跳转定义（切出新编辑器）： Ctrl + Alt + click
跳转定义（切出新tab）：F12 或 Ctrl + 左键点击文件
快速定位文件 ctrl + p
分割编辑窗口 ctrl+ \
快速调出终端 Ctrl+`
ctrl + d 选择同样元素
shift + tab 移动代码

四、Emmet

输入 div 回车

输入 div#IDname 回车

输入ul>li*2 回车

<ul>

</ul>

更多阅读：前端开发必备！Emmet使用手册_Emmet, 会员专栏教程_W3cplus

五、snippets 定义代码片段，便于快速复用

依次点击：左下角设置图标=》用户代码片段=》在顶部弹出框中选择新建代码片段，起个名字保存后，生成的文件注释中有下面一段，把注释去掉，修改对应的内容即可，各项内容含义看下面注释。

"Print to console": { //是智能提示显示的

"scope": "javascript,typescript",

"prefix": "log", //用户输入此处字符进行提示

"body": [//代码片段写在此处

"console.log('$1');", // $1代表光标位置

"$2"

"description": "描述"

}

这样定义后，下次输入log，就会显示提示，在提示中选择我们定义的那项，就会将代码片段插入，光标自定义到相应的$1处

vs code 简易使用教程（前端）相关推荐

layui个人中心html,Layui的简易入门教程
layui是一款采用自身模块规范编写的前端UI框架,非常适合界面的快速开发.本篇文章给大家分享一下Layui的简易入门教程,介绍一下layui如何在你的项目中使用. 获得 layui 后,将其完整地部 ...
Music Store(音乐商店)简易中文教程
官方网址: CodePlexProject Hosting for Open Source Software http://www.codeplex.com/ ===== ...
Markdown 简易入门教程
自己整理的 Markdown 简介.编辑器推荐.语法.特征等,是 Markdown 的简易入门教程目录概述简介官方文档 Markdown编辑器初级语法标题粗体和斜体段落和换行分隔线 ...
java前端目录_[Java教程]前端那点事儿——Tocify自动生成文档目录
[Java教程]前端那点事儿--Tocify自动生成文档目录 0 2016-06-29 22:00:07 今天偶然间看到文档服务器有一个动态目录功能,点击目录能跳转到指定的位置:窗口滑动也能自动更新目 ...
Python模块(8)-sklearn 简易使用教程
sklearn 简易使用教程 1.scikit-learn的数据集 2.scikit-learn 的训练和预测 scikit-learn 是在Numpy,SciPy,Matplotlib三个模块上编写 ...
Python模块(7)-SciPy 简易使用教程
SciPy 简易使用教程 1. 符号计算 2. 函数向量化 3. 波形处理scipy.signal 3.1 滤波器 3.2 波峰定位基于numpy的一个高级模块,为数学,物理,工程等方面的科学计算提 ...
python模块(5)-Matplotlib 简易使用教程
Matplotlib简易使用教程 0.matplotlib的安装 1.导入相关库 2.画布初始化 2.1 隐式创建 2.2 显示创建 2.3 设置画布大小 2.4 plt.figure()常用参数 3 ...
Python模块(2)-Numpy 简易使用教程
Numpy模块简易使用教程 1.数组创建 2.数组基本属性-维度.尺寸.数据类型 3.数组访问-索引.切片.迭代 4.数组的算术运算-加减乘除.转置求逆.极大极小 5.通用函数-sin,cos,ex ...
Python模块(1)-Argparse 简易使用教程
argparse 简易使用教程 1基本函数 2例子程序演示 3常用参数解释 4argparse模块整理的缘起 1基本函数 argparse是Python中用于命令行中进行参数解析的一个模块,可以自动生 ...

vs code 简易使用教程（前端）