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 相关文章推荐
JavaScript中的其他对象
Jan 16 Javascript
用 Javascript 验证表单(form)中的单选(radio)值
Sep 08 Javascript
js 判断文件类型并控制表单提交示例代码
Nov 14 Javascript
node.js入门教程
Jun 01 Javascript
Javascript基础教程之break和continue语句
Jan 18 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
May 27 Javascript
Bootstrap基本插件学习笔记之按钮(21)
Dec 08 Javascript
AngularJs 禁止模板缓存的方法
Nov 28 Javascript
详解node.js中的npm和webpack配置方法
Jan 21 Javascript
uni-app实现点赞评论功能
Nov 25 Javascript
jQuery实现回到顶部效果
Oct 19 jQuery
JavaScript实现雪花飘落效果
Dec 27 Javascript
浅谈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
PHP 各种排序算法实现代码
2009/08/20 PHP
解析php mysql 事务处理回滚操作(附实例)
2013/08/05 PHP
关于laravel模板中生成URL的几种模式总结
2019/10/18 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
javascript 四则运算精度修正函数代码
2010/05/31 Javascript
js工具方法弹出蒙版
2013/05/08 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
2013/11/01 Javascript
jquery中get和post的简单实例
2014/02/04 Javascript
js跨域访问示例(客户端/服务端)
2014/05/19 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
2016/01/04 Javascript
JQuery实现简单的服务器轮询效果实例
2016/03/31 Javascript
懒加载实现的分页&&网站footer自适应
2016/12/21 Javascript
利用Node.js编写跨平台的spawn语句详解
2017/02/12 Javascript
详解vue2路由vue-router配置(懒加载)
2017/04/08 Javascript
基于nodejs 的多页面爬虫实例代码
2017/05/31 NodeJs
es7学习教程之fetch解决异步嵌套问题的方法示例
2017/07/21 Javascript
Node.js Buffer用法解读
2018/05/18 Javascript
浅谈Vue初学之props的驼峰命名
2018/07/19 Javascript
微信小程序实现单选功能
2018/10/30 Javascript
如何从头实现一个node.js的koa框架
2019/06/17 Javascript
Javascript原型链及instanceof原理详解
2020/05/25 Javascript
详解用js代码触发dom事件的实现方案
2020/06/10 Javascript
Django数据库操作的实例(增删改查)
2017/09/04 Python
Python解析命令行读取参数--argparse模块使用方法
2018/01/23 Python
python中count函数简单用法
2020/01/05 Python
pytorch的梯度计算以及backward方法详解
2020/01/10 Python
python tkiner实现 一个小小的图片翻页功能的示例代码
2020/06/24 Python
Python fileinput模块如何逐行读取多个文件
2020/10/05 Python
Europcar德国:全球汽车租赁领域的领导者
2018/08/15 全球购物
Claire’s法国:时尚配饰、美容、珠宝、头发
2021/01/16 全球购物
Linux面试经常问的文件系统操作命令
2016/10/04 面试题
计算机应用专业学生的自我评价分享
2013/11/03 职场文书
应届生自荐信范文
2014/02/21 职场文书
机工车间主任岗位职责
2014/03/05 职场文书
2014年民主评议党员工作总结
2014/12/02 职场文书
mysql的MVCC多版本并发控制的实现
2021/04/14 MySQL