vscode 开发Vue项目的方法步骤


Posted in Javascript onNovember 25, 2018

下载地址:

vscode https://marketplace.visualstudio.com/VSCode或者本地地址:https://3water.com/softs/606746.html

开始安装插件

  • Vetur : vue的文件代码高亮
  • Atom One Dark Theme : 好看的代码颜色主题
  • Simple icon theme :清爽文件夹主题
  • Prettier - code : 代码格式化
  • ESLint :代码规范检查
  • Debugger for Chrome :断点调试

配置 ESLint

打开用户设置文件

// vscode默认启用了根据文件类型自动设置tabsize的选项
 "editor.detectIndentation": false,
 // 重新设定tabsize
 "editor.tabSize": 2,
 // #每次保存的时候自动格式化
 "editor.formatOnSave": true,
 // #每次保存的时候将代码按eslint格式进行修复
 "eslint.autoFixOnSave": true,
 // 添加 vue 支持
 "eslint.validate": [
  "javascript",
  "javascriptreact",
  {
   "language": "vue",
   "autoFix": true
  }
 ],
 // #让prettier使用eslint的代码格式进行校验
 "prettier.eslintIntegration": true,
 // #去掉代码结尾的分号
 "prettier.semi": false,
 // #使用带引号替代双引号
 "prettier.singleQuote": true,
 // #让函数(名)和后面的括号之间加个空格
 "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
 // #这个按用户自身习惯选择
 "vetur.format.defaultFormatter.html": "js-beautify-html",
 // #让vue中的js按编辑器自带的ts格式进行格式化
 "vetur.format.defaultFormatter.js": "vscode-typescript",
 "vetur.format.defaultFormatterOptions": {
  "js-beautify-html": {
   "wrap_attributes": "force-aligned"
   // #vue组件中html代码格式化样式
  }
 }

保存代码自动按照eslint格式化,一应俱全

断点调试

官网推荐 https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html

1、在浏览器中展示源码

如果你使用的是 Vue CLI 2,请设置并更新 config/index.js 内的 devtool 属性:

devtool: 'source-map',

如果你使用的是 Vue CLI 3,请设置并更新 vue.config.js 内的 devtool 属性:

module.exports = {
 configureWebpack: {
  devtool: 'source-map'
 }
}

2、在vscode中

点击在 Activity Bar 里的 Debugger 图标来到 Debug 视图,然后点击那个齿轮图标来配置一个 launch.json 的文件,选择 Chrome/Firefox: Launch 环境。然后将生成的 launch.json 的内容替换成为相应的配置:

{
 "version": "0.2.0",
 "configurations": [
  {
   "type": "chrome",
   "request": "launch",
   "name": "vuejs: chrome",
   "url": "http://localhost:8080",
   "webRoot": "${workspaceFolder}/src",
   "breakOnLoad": true,
   "sourceMapPathOverrides": {
    "webpack:///src/*": "${webRoot}/*"
   }
  },
  {
   "type": "firefox",
   "request": "launch",
   "name": "vuejs: firefox",
   "url": "http://localhost:8080",
   "webRoot": "${workspaceFolder}/src",
   "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
  }
 ]
}

然后就去使用吧,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
Aug 03 Javascript
有关于JS辅助函数inherit()的问题
Apr 07 Javascript
js中的前绑定和后绑定详解
Aug 01 Javascript
js实现window.open不被拦截的解决方法汇总
Oct 30 Javascript
javascript中createElement的两种创建方式
May 14 Javascript
javascript实现的多个层切换效果通用函数实例
Jul 06 Javascript
jquery实现点击展开列表同时隐藏其他列表
Aug 10 Javascript
JS生成某个范围的随机数【四种情况详解】
Apr 20 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
Sep 26 Javascript
Vue实现内部组件轮播切换效果的示例代码
Apr 07 Javascript
详解vue 路由跳转四种方式 (带参数)
Apr 28 Javascript
jquery+php后台实现省市区联动功能示例
May 23 jQuery
浅谈Vue.js 中的 v-on 事件指令的使用
Nov 25 #Javascript
electron + vue项目实现打印小票功能及实现代码
Nov 25 #Javascript
vue组件实践之可搜索下拉框功能
Nov 25 #Javascript
详解离线安装npm包的几种方法
Nov 25 #Javascript
vue将单页面改造成多页面应用的方法
Nov 25 #Javascript
vue下拉菜单组件(含搜索)的实现代码
Nov 25 #Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
Nov 25 #Javascript
You might like
windows7下php开发环境搭建图文教程
2015/01/06 PHP
常用的php图片处理类(水印、等比缩放、固定高宽)分享
2015/06/19 PHP
帝国cms常用标签汇总
2015/07/06 PHP
如何在PHP中生成随机数
2020/06/04 PHP
FormValidate 表单验证功能代码更新并提供下载
2008/08/23 Javascript
createElement动态创建HTML对象脚本代码
2008/11/24 Javascript
jQuery实现转动随机数抽奖效果的方法
2015/05/21 Javascript
理解javascript函数式编程中的闭包(closure)
2016/03/08 Javascript
jquery实现无刷新验证码的简单实例
2016/05/19 Javascript
TinyMCE汉化及本地上传图片功能实例详解
2016/05/31 Javascript
AngularJS入门教程之迭代器过滤详解
2016/08/18 Javascript
javascript history对象详解
2017/02/09 Javascript
JS同步、异步、延迟加载的方法
2018/05/05 Javascript
详解VS Code使用之Vue工程配置format代码格式化
2019/03/20 Javascript
使用Vue实现移动端左滑删除效果附源码
2019/05/16 Javascript
对layui初始化列表的CheckBox属性详解
2019/09/13 Javascript
Python的设计模式编程入门指南
2015/04/02 Python
Python实现模拟登录及表单提交的方法
2015/07/25 Python
Python实现多线程抓取网页功能实例详解
2017/06/08 Python
python编辑用户登入界面的实现代码
2018/07/16 Python
基于python 微信小程序之获取已存在模板消息列表
2019/08/05 Python
python导入不同目录下的自定义模块过程解析
2019/11/18 Python
Python实现清理微信僵尸粉功能示例【基于itchat模块】
2020/05/29 Python
基于python SMTP实现自动发送邮件教程解析
2020/06/02 Python
解决Python paramiko 模块远程执行ssh 命令 nohup 不生效的问题
2020/07/14 Python
Python Serial串口基本操作(收发数据)
2020/11/06 Python
PPP协议组成及简述协议协商的基本过程
2015/05/28 面试题
经典大学生求职信范文
2014/01/06 职场文书
本科生职业生涯规划书范文
2014/01/21 职场文书
建筑总经理岗位职责
2014/02/02 职场文书
《雨霖铃》教学反思
2014/02/22 职场文书
《跟踪台风的卫星》教学反思
2014/04/10 职场文书
员工评语范文
2014/12/31 职场文书
一波干货,会议主持词开场白范文
2019/05/06 职场文书
Python中的 No Module named ***问题及解决
2022/07/23 Python
mysql通过group by分组取最大时间对应数据的两种有效方法
2022/09/23 MySQL