插件安装:
Auto Rename Tag: 重命名标签时,自动更新结尾配对的标签
Chinese: 汉化
ESLint: 规范化代码,对应的setting配置(全局所有项目都有效),对应这个本身也不是很了解,也是上网搜的,有个详细的教程可以帮助了解
CSS Navigation: css跳转,ctrl+样式名可以跳转到对应的具体的css样式中(elementui组件上的样式也可进行跳转)
CSS Peek: css跳转,ctrl+样式名可以跳转到对应的具体的css样式中(只能是div等原生元素上的样式才能跳转)
file-jump: 路径跳转,ctrl+别名,可以跳转到对应的文件中
GitLens-Git supercharges: 鼠标放在每行代码末尾的时候,可以看到最近一次是谁提交的,以及提交时候的描述等信息
HTML Snippets: 自动补全html代码,但是现在停止维护,好像弃用了
JavaScript(ES6) code snippets: 自动补全js代码
Live Server: 右键open in live server运行html代码,会自动保存和刷新浏览器页面
open in broswer: 右键打开文件
Prettier - code formatter: 保存自动格式化
px2vw: px转为vw
Vetur: 识别vue文件的,vue项目必备
vscode-elm-jump: 变量跳转插件
vue-helper: 也是自动跳转的
code spell checker: 检查英文单词拼写是否有错的
插件安装我觉得这个写的挺好的,可以看看这个:
vscode 前端常用必备插件汇总。_itmonkey-cn的博客-CSDN博客_vscode 前端插件
setting的配置:也是上网搜的,下面链接可能会对理解有些帮助
浅析ESlint的作用、演进历史、ESLint校验文件方式及常见配置介绍、2种配置方式、eslint检测配置文件的机制 - 古兰精 - 博客园
{
// eslint代码自动检查相关配置,保存自动修复
"eslint.enable": true,
"eslint.autoFixOnSave": true,
"eslint.run": "onType",
"eslint.options": {
"extensions": [".js", ".vue"]
},
"eslint.validate": [
"javascriptreact",
"vue",
"javascript",
{
"language": "vue",
"autoFix": true
},
"html",
{
"language": "html",
"autoFix": true
}
],
"vetur.format.enable": true,
// prettier配置
// 使用单引号代替双引号
"prettier.singleQuote": true,
// html css suport配置
"editor.parameterHints.enabled": true,
"editor.quickSuggestions": {
"other": true,
"comments": true,
"strings": true
},
// 保存时自动格式化
"editor.formatOnSave": false,
// 规定html的格式化为prettier
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"security.workspace.trust.untrustedFiles": "open",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.tabSize": 2,
"vetur.validation.template": false,
"editor.fontSize": 20,
"window.zoomLevel": 1,
"files.autoSave": "afterDelay",
"files.trimTrailingWhitespace": true,
}
现在才发现,我跳转的装了好多,纯粹是可以用,但不知道是哪个起什么作用。
在vue的项目里如果想要自动保存和刷新的,文件=>自动保存:
vue项目去除行尾空格:设置里面 搜索 trim trailing whitespace,选择启用:
最后,假如换了电脑或者公司,肯定不想重新再配置一次了,可以同步一下到github,链接如下:
简单一步到位同步你的 VSCode 全部配置_imkaifan的博客-CSDN博客_vscode同步文章来源:https://www.toymoban.com/news/detail-456195.html
就是github网络实在不行,我现在还没配置成,总是配到一半就哦豁了,希望路过的大佬可以推荐一下爬墙的,感谢!文章来源地址https://www.toymoban.com/news/detail-456195.html
到了这里,关于vscode基本插件安装与配置的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!