使用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 流畅动画实现原理
Sep 08 Javascript
JS的事件绑定深入认识
Jun 26 Javascript
AngularJS内置指令
Feb 04 Javascript
JS+CSS实现的拖动分页效果实例
May 11 Javascript
微信小程序 wxapp地图 map详解
Oct 31 Javascript
PHP7新特性简述
Jun 11 Javascript
Async Validator 异步验证使用说明
Jul 03 Javascript
基于vue开发的在线付费课程应用过程
Jan 25 Javascript
详解swipe使用及竖屏页面滚动方法
Jun 28 Javascript
微信小程序项目实践之主页tab选项实现
Jul 18 Javascript
详解json串反转义(消除反斜杠)
Aug 12 Javascript
微信小程序获取当前位置和城市名
Nov 13 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一个找二层目录的小东东
2012/08/02 PHP
php获取服务器信息的实现代码
2013/02/04 PHP
CI框架验证码CAPTCHA辅助函数用法实例
2014/11/05 PHP
php实现的三个常用加密解密功能函数示例
2017/11/06 PHP
javascript while语句和do while语句的区别分析
2007/12/08 Javascript
Jquery为单选框checkbox绑定单击click事件
2012/12/18 Javascript
jquery html动态生成select标签出问题的解决方法
2013/11/20 Javascript
node.js中的fs.fchmod方法使用说明
2014/12/16 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
2015/02/17 Javascript
JavaScript的Date()方法使用详解
2015/06/09 Javascript
JavaScript中eval()函数用法详解
2015/12/14 Javascript
jquery中validate与form插件提交的方式小结
2016/03/26 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
深入学习jQuery中的data()
2016/12/22 Javascript
JS实现二维数组横纵列转置的方法
2018/04/17 Javascript
微信小程序实现星级评分和展示
2018/07/05 Javascript
小程序登录态管理的方法示例
2018/11/13 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
2020/01/07 Javascript
Ubuntu 14.04+Django 1.7.1+Nginx+uwsgi部署教程
2014/11/18 Python
Python中使用Beautiful Soup库的超详细教程
2015/04/30 Python
Python数据结构与算法之使用队列解决小猫钓鱼问题
2017/12/14 Python
致Python初学者 Anaconda入门使用指南完整版
2018/04/05 Python
Python(Django)项目与Apache的管理交互的方法
2018/05/16 Python
python使用magic模块进行文件类型识别方法
2018/12/08 Python
python ffmpeg任意提取视频帧的方法
2020/02/21 Python
快速解决Django关闭Debug模式无法加载media图片与static静态文件
2020/04/07 Python
python程序输出无内容的解决方式
2020/04/09 Python
HTML5 表单验证失败的提示语问题
2017/07/13 HTML / CSS
高尔夫球鞋、服装、手套和装备:FootJoy
2018/12/15 全球购物
欧缇丽加拿大官方网站:Caudalie加拿大
2019/07/18 全球购物
社区科普工作方案
2014/06/03 职场文书
2015年七七事变78周年纪念活动方案
2015/05/06 职场文书
起诉书范文
2015/05/20 职场文书
2016廉洁从政心得体会
2016/01/19 职场文书
vue使用watch监听属性变化
2022/04/30 Vue.js
JS中forEach()、map()、every()、some()和filter()的用法
2022/05/11 Javascript