使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题


Posted in Javascript onMay 14, 2019

在终端中运行以下命令:

vue create xxx   // xxx为项目名称,例如 vue-project

然后,系统会提示我们选择默认预设或手动选择功能。使用向下箭头键,我们手动选择功能,然后按Enter键。

使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题

然后,我们将看到一系列功能选项。使用向下箭头键,我们将向下移动并使用空格键选择需要的功能,然后按回车键。

使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题

Linter / Formatter 就是代码风格。 我们将使用 ESLint + Prettier

使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题

我们将在保存时添加Lint的附加功能。

使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题

我们将选择单独的配置文件。

使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题

我们可以选择是否将这些所有的设置保存起来,下次生成项目时,直接使用。这里不需要,就选择 N

使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题

如果你想储存下来,这是设置会储存在 .vuerc 用户主目录中指定的 JSON 文件中。

这里我们选择 npm 作为包管理器。

项目创建完成后, cd 进入项目根目录, 例如: cd vue-project 然后,在根目录运行命令: npm run serve 启动项目,然后浏览器打开: localhost:8080 就能看到初始项目了。

安装 Vetur

此时,我们用 VS Code 打开项目, .vue 的文件是灰色的,这是因为 VS Code 没有 .vue 文件的语法高亮。

使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题

所以就需要安装 Vetur 这个插件帮助我们。打开左侧的插件市场。

使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题

然后搜索“Vetur”,在搜索结果中选择它,然后单击“install/安装”。然后单击“ Reload/重新加载”。

此时,我们的 .vue 文件就有语法高亮了。

另外, Vetur 有一些代码片段,我们在.vue文件中键入单词“scaffold”并按Enter键,这将使用单个文件.vue组件的骨架或脚手架自动填充该文件。

使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题 

安装ESLint 和 Prettier

在扩展存储中,我们将搜索ESLint,然后继续安装它。Prettier也是一样的步骤。安装完毕,我们会重新加载VS Code。

配置ESLint

在我们项目根目录的.eslintrc.js文件中,添加: 'plugin:prettier/recommended' ,这将在ESLint中启用Prettier支持。

module.exports = {
   root: true,
   env: {
    node: true
   },
   'extends': [
    'plugin:vue/essential',
    'plugin:prettier/recommended', // we added this line
    '@vue/prettier'
   ],
   rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
   },
   parserOptions: {
    parser: 'babel-eslint'
   }
  }

配置 Prettier

我们还可以创建一个Prettier配置文件,根据我们的个人风格或团队的偏好添加一些特殊设置。

同样在项目根目录创建 .prettierrc.js

module.exports = {
  singleQuote: true,
  semi: false
}

这两项设置是将双引号转换为单引号,并且结尾不使用分号。

用户设置

为了进一步的优化VS Code的开发体验,我们将用户设置添加一些配置。 首选项 >>> 设置 >>> 用户设置 ,进入 settings.json 文件中。

首先关闭Vetur的linting功能,添加:

"vetur.validation.template": false

现在我们想告诉ESLint我们希望它验证哪些语言(vue,html和javascript)并设置autoFix为true每个语言:

"eslint.validate": [
  {
    "language": "vue",
    "autoFix": true
  },
  {
    "language": "html",
    "autoFix": true
  },
  {
    "language": "javascript",
    "autoFix": true
  }
],

然后,设置 ESLint autoFixOnSave。

"eslint.autoFixOnSave": true,

并设置我们的编辑器本身formatOnSave。

"editor.formatOnSave": true,

至此,我们设置就基本完成了,当我们保存文件的时候,就可以自动格式化代码了。

总结

以上所述是小编给大家介绍的使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时会及时回复大家的!

Javascript 相关文章推荐
javascript等号运算符使用详解
Apr 16 Javascript
原生JavaScript实现瀑布流布局
Jun 28 Javascript
适用于手机端的jQuery图片滑块动画
Dec 09 Javascript
Bootstrap Table使用整理(三)
Jun 09 Javascript
浅谈React中组件间抽象
Jan 27 Javascript
浅谈vue后台管理系统权限控制思考与实践
Dec 19 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
Jul 22 Javascript
解析JS在获取当前月的最后一天遇到的坑
Aug 30 Javascript
javascript操作元素的常见方法小结
Nov 13 Javascript
微信小程序实现上拉加载功能
Nov 20 Javascript
vue实现PC端分辨率适配操作
Aug 03 Javascript
构建一个JavaScript插件系统
Oct 20 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
May 14 #Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
May 14 #Javascript
fastadmin中调用js的方法
May 14 #Javascript
vue+elementUI实现表单和图片上传及验证功能示例
May 14 #Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
May 14 #Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
May 14 #Javascript
详解jenkins自动化部署vue
May 14 #Javascript
You might like
PHP执行zip与rar解压缩方法实现代码
2010/12/05 PHP
PHP中使用cURL实现Get和Post请求的方法
2013/03/13 PHP
微信公众号开发之微信公共平台消息回复类实例
2014/11/14 PHP
php获取当月最后一天函数分享
2015/02/02 PHP
Maps Javascript
2007/01/22 Javascript
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
2007/08/21 Javascript
JavaScipt基本教程之JavaScript语言的基础
2008/01/16 Javascript
JavaScript中继承的一些示例方法与属性参考
2010/08/07 Javascript
jQuery简单实现网页选项卡特效
2014/11/24 Javascript
JS运动框架之分享侧边栏动画实例
2015/03/03 Javascript
Jquery遍历Json数据的方法
2015/04/20 Javascript
详解JavaScript中void语句的使用
2015/06/04 Javascript
javascript连续赋值问题
2015/07/08 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
2016/09/04 Javascript
JS实现简单的天数计算器完整实例
2017/04/28 Javascript
解决VUEX刷新的时候出现数据消失
2017/07/03 Javascript
关于jQuery里prev()的简单操作代码
2017/10/27 jQuery
详解webpack多页面配置记录
2018/01/22 Javascript
vue实现前端分页完整代码
2020/06/17 Javascript
解决vue+webpack项目接口跨域出现的问题
2020/08/10 Javascript
[02:52]2017DOTA2国际邀请赛中国区预选赛晋级之路
2017/07/03 DOTA
[14:19]2018年度COSER大赛-完美盛典
2018/12/16 DOTA
Python的Twisted框架上手前所必须了解的异步编程思想
2016/05/25 Python
django认证系统实现自定义权限管理的方法
2019/08/28 Python
python fuzzywuzzy模块模糊字符串匹配详细用法
2019/08/29 Python
详解PyQt5中textBrowser显示print语句输出的简单方法
2020/08/07 Python
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
2013/06/06 HTML / CSS
Simons官方网站:加拿大时尚零售商
2020/02/20 全球购物
租房协议书
2014/04/10 职场文书
2014年度个人总结范文
2015/03/09 职场文书
民事起诉状范文
2015/05/19 职场文书
南京南京观后感
2015/06/02 职场文书
MongoDB数据库常用的10条操作命令
2021/06/18 MongoDB
html中显示特殊符号(附带特殊字符对应表)
2021/06/21 HTML / CSS
mysql 索引的数据结构为什么要采用B+树
2022/04/26 MySQL
腾讯云服务器部署前后分离项目之前端部署
2022/06/28 Servers