vscode中怎么配置vue?针对vue语法做识别?下面本篇文章给大家介绍一下将vetur作为语言识别引擎的方法,让我们来打造vuers最好用的vscode吧!
从官网下载vscode后,安装打开,提示要安装中文语言包,按照提示安装重启,界面就变成中文界面了。【推荐学习:《vscode教程》】
界面主题使用Materia Theme,界面风格非常干净,颜色也比较护眼,写代码的时候心情也跟着清新起来~
图标显示使用Material Icon Theme,文件图标非常齐全,搭配Materia Theme非常好看
立即学习“前端免费学习笔记(深入)”;
因为我使用的是vue技术栈,所以还要针对vue语法做识别,这里推荐按照Vetur作为语言识别引擎,提供语法识别,格式化,相关提示。
配置格式化
vetur自带格式化工具,使用的是prettier格式化方案,具体可以看配置,使用ctrl/command + ,打开设置
可以看到js的格式化引擎默认使用的是prettier
但是一般项目都是推荐使用eslint统一源码格式,所以还要对vuter进行eslint的适配
安装eslint和prettier扩展
按照eslint扩展提示,要正常使用eslint,还要全局按照eslint
npm install -g eslint
使用自定义配置进行格式化,以下是我的vscode自定义设置
{ "workbench.iconTheme": "eq-material-theme-icons", "workbench.colorTheme": "Material Theme", "materialTheme.fixIconsRunning": false, "editor.fontSize": 16, // 字体大小 // 以下是代码格式化配置 "editor.formatOnSave": true, // 每次保存的时候自动格式化 "editor.tabSize": 2, // 代码缩进修改成2个空格 "eslint.autoFixOnSave": false, // 每次保存的时候将代码按eslint格式进行修复 "prettier.eslintIntegration": true, // 让prettier使用eslint的代码格式进行校验 "prettier.semi": false, // 去掉代码结尾的分号 "prettier.singleQuote": true, // 使用带引号替代双引号 "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 让函数(名)和后面的括号之间加个空格 "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化 "vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_attributes": "force-aligned" //属性强制折行对齐 } }, "eslint.validate": [ //开启对.vue文件中错误的检查 "javascript", "javascriptreact", { "language": "html", "autoFix": true }, { "language": "vue", "autoFix": true } ] }
每次进行保存的时候都会进行格式化,解放劳动力,效果如下
常用插件
- Auto Rename Tag 改标签名的时候,自动更改闭合标签名
- Bookmarks 书签插件,记录代码重点,review的时候更容易get对应的点
- Bracket Pair Colorizer 括号着色,对于多个嵌套的括号对应识别精准
- Change Case 代码变量声明时候,可以对已有变量切换成驼峰式,常量式,其他的风格
- Codelf 说起代码命名我就来气,他么的编程一半时间就是在想怎么命名更贴切,合适,有了这个神器,虽然说不能解决命名想破脑瓜子的难题,但是至少提供了建议,能更快解决,避免脑瓜子想破
- cssrem 一个CSS值转REM的VSCode插件
html字体我这边设计是使用14px,所以转的时候,对应关系应该是 1rem = 14px,所以要在用户设置里面进行配置
// 第三方插件cssrem配置 "cssrem.rootFontSize": 14
- Vue Peek 右键打开或预览引用的组件
- filesize 计算源码文件大小,并显示在左下角
- GitLens git历史查看,提交记录查看,历史比较,版本回滚,神器不解析
- Import Cost 计算import引入的文件大小
- IntelliSense for CSS class names in HTML class根据工作空间中找到的定义或通过link元素引用的外部文件,为HTML 属性提供CSS类名称完成。
因为我们使用vue语言开发,所以还要针对vue进行一下css的提示配置
"html-css-class-completion.includeGlobPattern": "**/*.{css,html,vue}"
-
Live Server 提供对HTML的即时服务预览,代码改动即时刷新
-
Path Intellisense 路径引入智能感知
-
npm-intellisense npm module 引入智能感知
-
RegExp Preview and Editor 正则表达式预览和编辑
-
Settings Sync 同步你的vscode设置,包括插件,主题一切用户数据
-
SVG Viewer 预览SVG
-
Todo Tree 显示你代码里面的TODO列表
-
translate 翻译
-
Tslint ts代码格式检测工具
-
Version Lens npm version检测
-
vscode-fileheader 生成文档注释头
-
JavaScript (ES6) code snippets es代码片段
-
Copy Relative Path 复制相对路径
更多编程相关知识,请访问:vscode教程!!