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 相关文章推荐
js 操作select相关方法函数
Dec 06 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
May 23 Javascript
jQuery实现dialog设置focus焦点的方法
Jun 10 Javascript
自己动手写的jquery分页控件(非常简单实用)
Oct 28 Javascript
JS for循环中i++ 和 ++i的区别介绍
Jul 20 Javascript
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
Angular实现搜索框及价格上下限功能
Jan 19 Javascript
微信小程序模版渲染详解
Jan 26 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
Jul 23 Javascript
layui 富文本赋值,取值,取纯文本值的实例
Sep 18 Javascript
在VUE style中使用data中的变量的方法
Jun 19 Javascript
让JavaScript代码更加精简的方法技巧
Jun 01 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使用Session和文件统计在线人数
2015/07/04 PHP
ThinkPHP模型详解
2015/07/27 PHP
PHP小白必须要知道的php基础知识(超实用)
2017/10/10 PHP
PHP实现简易用户登录系统
2020/07/10 PHP
网页设计常用的一些技巧
2006/12/22 Javascript
javascript基础的动画教程,直观易懂
2007/01/10 Javascript
JavaScript让IE浏览器event对象符合W3C DOM标准
2009/11/24 Javascript
原生js 秒表实现代码
2012/07/24 Javascript
利用JS来控制键盘的上下左右键(示例代码)
2013/12/14 Javascript
js实现a标签超链接提交form表单的方法
2015/06/24 Javascript
JavaScript获取并更改input标签name属性的方法
2015/07/02 Javascript
JavaScript 正则表达式中global模式的特性
2016/02/25 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
2016/05/16 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
2016/05/27 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
2017/03/02 Javascript
jQuery使用zTree插件实现可拖拽的树示例
2017/09/23 jQuery
Vue.js 利用v-for中的index值实现隔行变色
2018/08/01 Javascript
Node.js原生api搭建web服务器的方法步骤
2019/02/15 Javascript
vue组件中传值EventBus的使用及注意事项说明
2020/11/16 Javascript
[53:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第三场 6.2
2018/06/03 DOTA
python实现ftp客户端示例分享
2014/02/17 Python
小小聊天室Python代码实现
2016/08/17 Python
Python通过future处理并发问题
2017/10/17 Python
同时安装Python2 & Python3 cmd下版本自由选择的方法
2017/12/09 Python
Django--权限Permissions的例子
2019/08/28 Python
树莓派安装OpenCV3完整过程的实现
2019/10/10 Python
python中time、datetime模块的使用
2020/12/14 Python
美国领先的奢侈手表在线零售商:WatchMaxx
2017/12/17 全球购物
韩国美国时尚服装和美容在线全球市场:KOODING
2018/11/07 全球购物
优秀共产党员演讲稿
2014/09/04 职场文书
师德先进个人事迹材料
2014/12/19 职场文书
2015年劳动部工作总结
2015/05/23 职场文书
养成教育工作总结
2015/08/13 职场文书
新农村建设指导员工作总结
2015/08/13 职场文书
Python制作表白爱心合集
2022/01/22 Python
pd.drop_duplicates删除重复行的方法实现
2022/06/16 Python