使用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 相关文章推荐
Jquery网页出现的乱码问题的三种解决方法
Jun 30 Javascript
js日期联动示例
May 02 Javascript
Extjs grid panel自带滚动条失效的解决方法
Sep 11 Javascript
使用百度地图api实现根据地址查询经纬度
Dec 11 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
Sep 19 Javascript
jQuery实现边框动态效果的实例代码
Sep 23 Javascript
Jquery实现跨域异步上传文件总结
Feb 03 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
Jul 13 Javascript
vue mounted组件的使用
Jun 18 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
Dec 20 Javascript
微信小程序实现banner图轮播效果
Jun 28 Javascript
在layui中layer弹出层点击事件无效的解决方法
Sep 05 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数字和字符串ID互转函数(类似优酷ID)
2014/06/30 PHP
PHP5.5新特性之yield理解与用法实例分析
2019/01/11 PHP
IE8 引入跨站数据获取功能说明
2008/07/22 Javascript
JavaScript中各种编码解码函数的区别和注意事项
2010/08/19 Javascript
网易JS面试题与Javascript词法作用域说明
2010/11/09 Javascript
formValidator3.3的ajaxValidator一些异常分析
2011/07/12 Javascript
javascript数组去重3种方法的性能测试与比较
2013/03/26 Javascript
jquery判断元素是否隐藏的多种方法
2014/05/06 Javascript
JS实现的5级联动Select下拉选择框实例
2015/08/17 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
2016/08/02 Javascript
js倒计时简单实现代码
2016/08/11 Javascript
JavaScript  event对象整理及详细介绍
2016/10/10 Javascript
Vue2学习笔记之请求数据交互vue-resource
2017/02/23 Javascript
12个非常有用的JavaScript技巧
2017/05/17 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
2017/12/07 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
2018/05/15 Javascript
vue中axios的封装问题(简易版拦截,get,post)
2018/06/15 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
2019/01/08 Javascript
js面向对象之实现淘宝放大镜
2020/01/15 Javascript
python实现k均值算法示例(k均值聚类算法)
2014/03/16 Python
一键搞定python连接mysql驱动有关问题(windows版本)
2016/04/23 Python
如何利用Fabric自动化你的任务
2016/10/20 Python
插入排序_Python与PHP的实现版(推荐)
2017/05/11 Python
python 日志 logging模块详细解析
2020/03/31 Python
早晨薰衣草在线女性精品店:Morning Lavender
2021/01/04 全球购物
英文自荐信
2013/12/19 职场文书
委托证明的格式
2014/01/10 职场文书
企业出纳岗位职责
2014/03/12 职场文书
报关报检委托书
2014/04/08 职场文书
本科应届生自荐信
2014/06/29 职场文书
信用卡工作证明模板
2014/09/14 职场文书
关于成绩下滑的自我检讨书
2014/09/20 职场文书
2014年个人债务授权委托书范本
2014/09/22 职场文书
2015年设计师个人工作总结
2015/04/25 职场文书
干货:如何写好观后感 !
2019/05/21 职场文书
Python 数据可视化工具 Pyecharts 安装及应用
2022/04/20 Python