别名路径跳转
- 下载后只需自定义配置一些自己常用的别名路径即可
// 文件名别名跳转
"alias-skip.mappings": {
"~@/": "/src",
"views": "/src/views",
"assets": "/src/assets",
"network": "/src/network",
"common": "/src/common"
},
- 右击插件–》扩展设置–》路径映射在settinas.json中编辑
路径别名智能提示
- 插件名:path-alias
- 场景: 在导入组件的时候,使用别名路径没用提示时👇 (可和别名路径跳转同时使用, 无冲突)
indent-rainbow
- 插件名: indent-rainbow
- 功能:彩虹缩进
Tabnine
- 插件名: Tabnine
- 功能:智能提示代码,可以预测你将要写的代码进行提示
Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
中文语言插件
Highlight Matching Tag
编辑高亮
GitHub Copilot
Auto Rename Tag
自动重命名配对的 HTML / XML 标签,也可以在 JSX 中使用。
在 settings.json 文件中的 auto-rename-tag.activationOnLanguage 中添加一项以设置扩展名将被激活的语言。默认情况下,它是**[“ *”]**,将为所有语言激活。
"auto-rename-tag.activationOnLanguage": ["html", "xml", "php", "javascript"]
koroFileHeader
用于生成文件头部注释和函数注释的插件,支持所有主流语言,功能强大,灵活方便,文档齐全,食用简单!
使用方法
Bracket Pair Colorizer 2
Color Highlight
此扩展程序设置在文档中找到的 css / web 颜色的样式。
CSS Peek
Image preview
悬停时显示图像预览。
indent-rainbow
Rainbow Brackets
:为括号设置不同颜色,方便区分
Auto Import
:可以自动找到、解析所有可用的导入,并提供代码操作和完成
Material Icon Theme
:替换VS Code标题栏中文件类型的图标
Better Comments
:优化注释,支持不同类型的注释变成不同的颜色
Path Intellisense
:自动提示文件路径和文件名
TODO Highlight
Vetur
vue
vue-beautify
VueHelper
open in browser
文件打开浏览器
Prettier - Code formatter
ESLint
格式化规范开发文件 settings.json 相关配置
"eslint.nodeEnv": "",
// tab 大小为2个空格
"editor.tabSize": 2,
// 100 列后换行
"editor.wordWrapColumn": 100,
// 保存时格式化
"editor.formatOnSave": true,
// 开启 vscode 文件路径导航
"breadcrumbs.enabled": true,
// prettier 设置语句末尾不加分号
"prettier.semi": false,
// prettier 设置强制单引号
"prettier.singleQuote": true,
// 选择 vue 文件中 template 的格式化工具
"vetur.format.defaultFormatter.html": "prettyhtml",
// 显示 markdown 中英文切换时产生的特殊字符
"editor.renderControlCharacters": true,
// eslint 检测文件类型
"eslint.validate": ["javascript", "vue", "html"],
// vetur 的自定义设置
"vetur.format.defaultFormatterOptions": {
"prettier": {
"singleQuote": true,
"semi": false
}
},
// 修改500ms后自动保存
"editor.formatOnSaveTimeout": 500,
"files.autoSaveDelay": 500,
"editor.codeActionsOnSaveTimeout": 500,
"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
// 设置 eslint 保存时自动修复
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
"eslint.format.enable": true,
"editor.inlineSuggest.enabled": true,
"auto-close-tag.activationOnLanguage": [
"xml",
"php",
"blade",
"ejs",
"jinja",
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"plaintext",
"markdown",
"vue",
"liquid",
"erb",
"lang-cfml",
"cfml",
"HTML (EEx)",
"HTML (Eex)",
"plist"
],```