使用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里使用Dom操作Xml
Jan 22 Javascript
JavaScript flash复制库类 Zero Clipboard
Jan 17 Javascript
3种不同方式的焦点图轮播特效分享
Oct 30 Javascript
jQuery获取对象简单实现方法小结
Oct 30 Javascript
JavaScript不刷新实现浏览器的前进后退功能
Nov 05 Javascript
AngularJS语法详解
Jan 23 Javascript
JavaScript中的原型prototype属性使用详解
Jun 05 Javascript
jQuery实现折叠、展开的菜单组效果代码
Sep 16 Javascript
轮播的简单实现方法
Jul 28 Javascript
create-react-app修改为多页面支持的方法
May 17 Javascript
小程序input数据双向绑定实现方法
Oct 17 Javascript
js简单实现自动生成表格功能示例
Jun 02 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学习教程之第1天
2008/06/15 PHP
php多任务程序实例解析
2014/07/19 PHP
YII Framework框架教程之国际化实现方法
2016/03/14 PHP
CI(CodeIgniter)框架视图中加载视图的方法
2017/03/24 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
javascript动态加载实现方法一
2012/08/22 Javascript
使用firebug进行调试javascript的示例
2013/12/16 Javascript
浅析JavaScript中的array数组类型系统
2016/07/18 Javascript
jQuery简单注册和禁用全局事件的方法
2016/07/25 Javascript
js中判断变量类型函数typeof的用法总结
2016/08/09 Javascript
jQuery中JSONP的两种实现方式详解
2016/09/26 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
2017/01/13 Javascript
loading动画特效小结
2017/01/22 Javascript
jquery+css实现简单的图片轮播效果
2017/08/07 jQuery
Vue实现简单分页器
2018/12/29 Javascript
jQuery选择器之层次选择器用法实例分析
2019/02/19 jQuery
微信小程序按钮点击跳转页面详解
2019/05/06 Javascript
js实现简单进度条效果
2020/03/25 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
2021/02/24 Javascript
Python返回真假值(True or False)小技巧
2015/04/10 Python
JPype实现在python中调用JAVA的实例
2017/07/19 Python
Windows下的Python 3.6.1的下载与安装图文详解(适合32位和64位)
2018/02/21 Python
Ubuntu下使用python读取doc和docx文档的内容方法
2018/05/08 Python
python3使用smtplib实现发送邮件功能
2018/05/22 Python
Tensorflow 训练自己的数据集将数据直接导入到内存
2018/06/19 Python
python利用百度云接口实现车牌识别的示例
2020/02/21 Python
详解移动端HTML5音频与视频问题及解决方案
2018/08/22 HTML / CSS
Omio西班牙:全欧洲低价大巴、火车和航班搜索和比价
2017/02/11 全球购物
介绍一下SQL中union,intersect和minus
2012/04/05 面试题
计算机应用毕业生自荐信
2013/10/23 职场文书
经济管理专业求职信
2014/06/09 职场文书
地球一小时活动总结
2015/02/27 职场文书
2016年寒假家长评语
2015/10/10 职场文书
学校2016年全国助残日活动总结
2016/04/01 职场文书
Python答题卡识别并给出分数的实现代码
2021/06/22 Python
Python Pytorch查询图像的特征从集合或数据库中查找图像
2022/04/09 Python