VsCode
1.用户和工作区设置
2.快捷键
快捷键 | 用途 |
---|---|
ctrl+/ | 行注释 |
shift+alt+A | 块注释 |
ctrl+F | 查找 |
ctrl+H | 替换 |
ctrl+shift+F | 文件夹查找 |
ctrl+enter | 下方插入一行 |
ctrl+shift+enter | 上方插入一行 |
alt+shift+F | 格式化代码 |
ctrl+shift+p | 打开命令面板 |
- 可在首选项——键盘快捷方式中进行设置调整
- 可在首选项——键盘映射中选择熟悉编辑器的快捷键,推荐使用WebStorm的快捷键(IntelliJ IDEA Keybindings)
3.git 配置
首先电脑已安装git bash,且已经配置好git一系列设置
通过vs code中的git面板进行简单的add、commit、push、pull等操作
4.扩展插件
插件名 | 功能 |
---|---|
auto close tag | 自动闭合标签 |
auto rename tag | 自动修改标签 |
Bracket Pair Colorizer 2 | 用颜色标识匹配的括号 |
Color Highlight | 在文档中找到的 css / web 颜色的样式 |
css peek | html与css关联 |
ESLint | vscode中的eslint支持 |
Git History | 查看git历史,reset等一些git操作 |
Highlight Matching Tag | 突出显示匹配的开始或结束标签 |
html css support | html中css class的智能提示 |
IntelliJ IDEA Keybindings | WebStorm快捷键 |
Prettier | 代码格式化 |
Sass | 代码格式化 |
Version Lens | 显示 package.json 文件中每个软件包的最新版本 |
Vetur | vue的vscode支持 |
vue css peek | vue文件中html与css关联 |
Better Comments | 有多种颜色的注释 |
Live Server | 内置服务器,可以直接访问html文件 |
Path Intelligence | 路径自动完成 |
其他:Debugger for Chrome,Gitlens,vscode-proto3
最新更新,vscode已将以上部分扩展收入囊中,所以有些扩展不必再装,
- Auto Close Tag
- Auto Rename Tag
- Trailing Spaces
- Path IntelliSense
- Path Autocomplete
- Settings Sync
- HTML Snippets
- Bracket pair colorization
- Auto Import
- TypeScript Hero
- Github
- Beautify
详见此篇博客:https://juejin.cn/post/7274879238652723260
5.图标
个人比较喜欢Material Icon,其他还有VSCode icons等。
其他参考文章:
高效的编码:我的VS Code设置
ESlint
1.安装配置
首先保证nodejs和npm是最新的,笔者曾用过旧版的nodejs后总是报错。
npm install -g eslint
安装完成后
eslint --init
一路配置
2.规则配置
除非团队有自定义规则,不然一般使用eslint自带规则就够了。
3.编辑器配置
这里以vscode举例,vscode中安装eslint插件。
在vscode中修改用户配置文件settings.json。