一、 vscode常用插件
1. any-rule
- 常用正则大全
- 使用：
按F1(或ctrl + shift + p) -> 输入zz可以看到正则列表（或者输入关键词, 比如"手机"）
图1-1
2. Auto Close Tag
自动补全 html 标签
3. Auto Rename Tag
自动完成另一侧标签的同步修改
4. Auto Babel ES6/ES7
添加JS Babel ES6/ES7语法着色
5. Beautify
- 格式化代码
- settings.json配置：
// Beautify插件设置
"[javascript]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"[html]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"javascript.updateImportsOnFileMove.enabled": "always",
"beautify.config": "",
"beautify.language": {
"html": ["htm", "html", "vue"],
"js": {
"type": ["javascript", "json"],
"filename": [".jshintrc", ".jsbeautify"]
},
"css": ["css", "scss", "less"]
},
"[vue]": {
"editor.defaultFormatter": "HookyQR.beautify"
}
6. Bracket Pair Colorizer
成对儿的括号都会以不同的颜色进行区别
7. Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
汉化包
8. Git History
- 查看git修改记录
-
使用：
图9-1
9. GitLens
- 查看代码作者的身份，无缝地导航和浏览 Git存储库。
-
使用：
图9-1
10. git 操作
① 切换分支
图10-1
② 拉取代码并推送
图10-2
③ 提交
图10-3
图10-4
④ 回退
图10-5
图10-6
图10-7
图10-8
11. JavaScript (ES6) code snippets
ES6语法智能提示，以及快速输入，不仅仅支持.js，还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含js代码文件的时间
12. HTML Snippets
主要是针对html的语法的，支持以下标签
- html5的全部标签
- 标签含义信息提示
- 一些描述性的语法
13. HTMLHint
- 对html代码格式的检查
- 需要配置，见在vscode工具中，使用eslint，stylelint，htmlhint对vue项目代码格式的检查
14. jshint
JSHint 是一个社区驱动的工具，可检测 JavaScript 代码中的错误和潜在问题。由于 JSHint 非常灵活，因此您可以在您期望执行代码的环境中轻松调整它。
15. Live Server
为静态和动态页面启动具有实时重新加载功能的开发本地服务器。
16. npm Intellisense
自动完成导入语句中的npm模块。
17. open in browser
当前的 html 文件用浏览器打开
18. Path Intellisense
路径自动补全
19. Polacode-2020
- 生成代码截图
- 使用：
按住ctrl + shift + p或F1-> 输入polacode-> 选中要生成图片的代码
图19-1
20. Project Manager
- 如果你的公司有非常多项目，需要来回切换的话，推荐Project Manage可以让你轻松在项目直接替换，无需在导入项目文件夹打开。
- 使用：
按住ctrl + shift + p或F1-> 输入project save project-> 输入标签名
图20-1
图20-2
图20-3
图20-4
21. Settings Sync
- vscode同步设置
- 使用：
① 登录git
② 获取git 上的access token
图21-1
图21-2
图21-3
图21-4
图21-5
③ 获取git 上的gists id
图21-6
图21-7
图21-8
图21-9
④ vscode配置access token
打开 VSCode -> ctrl（mac 是 command） + shift + p -> 输入 sync -> 点击 Sync: Upload / Update Settings
图21-10
图21-11
输入图21-5保存的 access token,图21-9保存的 gist id
图21-12
配置成功后，setttings.json
图21-13
⑤ 查看同步记录
图21-14
图21-15
⑥ 同步设置
执行图21-14后，
图21-16
⑦ 重新设置同步
ctrl（mac 是 command） + shift + p 或 F1 -> 输入 sync -> 点击 Sync: Advance Options
图21-17
图21-18
图21-19
⑧ 下载设置
ctrl（mac 是 command） + shift + p 或 F1 -> 输入 sync -> 点击 Sync: Downloads Settings
或者 ctrl + alt + d
图21-20
图21-21
图21-22
22. CSS Peek
- 快速查看css定义
- 使用：
鼠标移至class/id名上，按下F12键
图22-1
23. Debugger for Chrome
- 在编辑器中打断点，让你轻松地在Chrome里调试JavaScript
-
使用：
图23-1
图23-2
图23-3
- 设置一键运行
图23-4
图23-5
图23-6
launch.json中加入启动命令
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "pwa-node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"program": "${file}"
},
{
"command": "npm run start",
"name": "npm run start",
"request": "launch",
"type": "node-terminal"
},
{
"command": "npm run restart",
"name": "npm run restart",
"request": "launch",
"type": "node-terminal"
},
{
"command": "npm run build",
"name": "npm run build",
"request": "launch",
"type": "node-terminal"
}
]
}
图23-7
24. Html Css Support
- 在标签新增class的时候会提示之前写过的class
- settings.json配置：
// Html Css Support插件设置（在标签新增class的时候会提示之前写过的class）
"editor.parameterHints.enabled": true,
"editor.quickSuggestions": {
"other": true,
"comments": true,
"strings": true
}
-
效果：
图24-1
25. Markdown Preview Enhanced
-
实时预览markdown，markdown使用者必备
图25-1
26. Vue - Official
-
vue3 ref定义的数据，自动补全.value
图26-1
)
二、代码格式化相关
1. Prettier - Code formatter
- 只关注格式化，并不具有eslint检查语法等能力，只关心格式化文件(最大长度、混合标签和空格、引用样式等)，包括JavaScript · Flow · TypeScript · CSS · SCSS · Less · JSX · Vue · GraphQL · JSON · Markdown
- settings.json配置：
// prettier 设置语句末尾不加分号
"prettier.semi": false,
// prettier 设置强制单引号
"prettier.singleQuote": true,
"prettier.tabWidth": 2,
"typescript.preferences.quoteStyle": "single",
"javascript.preferences.quoteStyle": "single",
2. ESLint
- eslint规则，可以配置保存时根据
.eslintrc.js自动修复 - .eslintrc.js配置(和vue.config.js同级)：
/**
********************************************************************
* 1、不检查某一行代码：
* '// eslint-disable-next-line' 在代码上一行使用 或者 '// eslint-disable-line' 和代码在一行
* 2、不检查某一段代码：
* 用 '/* eslint-disable 星号/' 包裹
* 3、不检查某一文件/文件夹：
* 将文件路径写入.eslintignore文件即可
********************************************************************
*/
module.exports = {
root: true,
// 此项是用来指定javaScript语言类型和风格，sourceType用来指定js导入的方式，默认是script，此处设置为module，指某块导入方式
parserOptions: {
parser: 'babel-eslint',
ecmaVersion: 2017,
sourceType: 'module'
},
globals: {
$: true
},
// 此项指定环境的全局变量，下面的配置指定为浏览器环境
env: {
browser: true,
node: true,
es6: true
},
// eslint标准文档：https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
// 此项是用来配置标准的js风格，就是说写代码的时候要规范的写，如果你使用vs-code我觉得应该可以避免出错
extends: [
'standard',
'plugin:vue/essential'
],
// 此项是用来提供插件的，插件名称省略了eslint-plugin-，下面这个配置是用来规范html的
plugins: [
'vue'
],
/*
* 自定义规则 eslint中文官网：http://eslint.cn/docs/rules/
* 下面这些rules是用来设置从插件来的规范代码的规则，使用必须去掉前缀eslint-plugin-
* 0-'off'-关闭规则 1-'warn'-开启警告规则 2-'error'-开启错误规则（可以设置字符串也可以设置数字）
*/
rules: {
// 不强制 generator 函数中 * 号周围有空格
'generator-star-spacing': 0,
// production环境 禁止 debugger 语句
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
// 要求在语句末尾使用分号
semi: [2, 'always'],
// 禁用不必要的分号
'no-extra-semi': 2,
// 不强制在 function的左括号之前使用一致的空格
'space-before-function-paren': [0, 'always'],
// 禁止在判断语句 else 前有 return
'no-else-return': 2,
// 禁止出现空函数
'no-empty-function': 2,
// 不强制对多行注释使用特定风格
'multiline-comment-style': 0,
// 不禁止注释和代码出现在同一行
'no-inline-comments': 0,
// 禁止 if 语句作为唯一语句出现在 else 语句块中 类似if(){} else {if(){}}
'no-lonely-if': 2,
// 禁止连续赋值，类似const a = b = 1;
'no-multi-assign': 2,
// 禁用行尾空白
'no-trailing-spaces': [2, {skipBlankLines: false}],
// 不允许花括号中有空格，类似[ 1 ]
'standard/array-bracket-even-spacing': [2, 'never'],
// 不允许花括号中有空格，类似{ a:1 }
'object-curly-spacing': [2, 'never'],
// 允许出现多个空格
'no-multi-spaces': [0, {'ignoreEOLComments': true}],
// 允许 const a = [], b = []
'one-var': [0, 'always']
}
};
- settings.json配置：
// eslint插件设置
"files.autoSave": "off",
"eslint.validate": [
"javascript",
"javascriptreact",
"vue",
"html"
],
"eslint.run": "onSave",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
3. vetur
图3-1
- settings.json配置：
// 选择 vue 文件中 template 的格式化工具
"vetur.format.defaultFormatter.html": "js-beautify-html",
// #让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatter.js": "vscode-typescript",
// vetur 的自定义设置
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned"
},
"prettier": {
"singleQuote": true,
"semi": false,
"printWidth": 300,
"wrapAttributes": false,
"sortAttributes": false
}
},
4. vue生成代码片段
图4-1
图4-2
vue.json配置如下
{
// Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
// "Print to console": {
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
"vue": {
"prefix": "vue",
"body": [
"<template>",
"\t<div$3>",
"\t\t$0",
"\t</div>",
"</template>",
"\t",
"<script>",
"export default {",
"\tname: '$1',",
"\tdata() {",
"\t\treturn {}",
"\t}",
"\tmethods: {",
"\t}",
"}",
"</script>",
"\t",
"<style lang=\"less\" scoped>",
"\t$0",
"</style>"
],
"description": "VueInit"
},
"template": {
"prefix": "template",
"body": [
"<template>",
"\t<div$2>",
"\t\t$0",
"\t</div>",
"</template>"
],
"description": "template element"
},
"script": {
"prefix": "script",
"body": [
"<script>",
"export default {",
"\tname: '$1',",
"\tdata() {",
"\t\treturn {}",
"\t}",
"\tmethods: {",
"\t}",
"}",
"</script>",
],
"description": "script element"
},
"style": {
"prefix": "style",
"body": [
"<style lang=\"less\" scoped>",
"\t$0",
"</style>"
],
"description": "style element with lang attribute"
}
}
输入vue -> 按下enter键后：
图4-3
三、离线安装插件
离线安装
①打开 VSCode -> ②点击扩展（EXTENSION） -> ③右侧的更多选项符号 ··· -> ④选择从 VSIX 安装 (install from VXIS) -> ⑤选择对应的扩展包，点击 安装，重启vscode即可
图3-1 离线安装
下载已安装的插件
如果是内网开发需要离线包，这时候只需要替换C:\Users\admin\.vscode\extensions文件，再重新加载即可。
图3-2 下载已安装的插件
遗留问题
- ctrl + 左键 无法定位到函数定义处
