VSCode中如何配置vue
小编给大家分享一下VSCode中如何配置vue，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
成都创新互联是一家集网站建设,防城企业网站建设,防城品牌网站建设,网站定制,防城网站建设报价,网络营销,网络优化,防城网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。
从官网下载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计算源码文件大小，并显示在左下角GitLensgit历史查看，提交记录查看，历史比较，版本回滚，神器不解析Import Cost计算import引入的文件大小IntelliSense for CSS class names in HTMLclass根据工作空间中找到的定义或通过link元素引用的外部文件，为HTML 属性提供CSS类名称完成。
因为我们使用vue语言开发，所以还要针对vue进行一下css的提示配置
"html-css-class-completion.includeGlobPattern": "**/*.{css,html,vue}"Live Server提供对HTML的即时服务预览，代码改动即时刷新Path Intellisense路径引入智能感知npm-intellisensenpm module 引入智能感知RegExp Preview and Editor正则表达式预览和编辑Settings Sync同步你的vscode设置，包括插件，主题一切用户数据SVG Viewer预览SVGTodo Tree显示你代码里面的TODO列表translate翻译Tslintts代码格式检测工具Version Lensnpm version检测vscode-fileheader生成文档注释头JavaScript (ES6) code snippetses代码片段Copy Relative Path复制相对路径
以上是“VSCode中如何配置vue”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
当前名称：VSCode中如何配置vue
URL链接：http://scjbc.cn/article/jcsopj.html
