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 相关文章推荐
EXT中xtype的含义分析
Jan 07 Javascript
javascript 使td内容不换行不撑开
Nov 29 Javascript
javascript 函数声明与函数表达式的区别介绍
Oct 05 Javascript
javascript实现的简单计时器
Jul 19 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
Sep 14 Javascript
详谈js对url进行编码和解码(三种方式的区别)
Aug 16 Javascript
vue项目中引入noVNC远程桌面的方法
Mar 05 Javascript
使用Vue构建可重用的分页组件
Mar 26 Javascript
JS html事件冒泡和事件捕获操作示例
May 01 Javascript
vue路由跳转传参数的方法
May 06 Javascript
jquery实现下载图片功能
Jul 18 jQuery
小程序简单两栏瀑布流效果的实现
Dec 18 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程序员面试 切忌急功近利(更需要注重以后的发展)
2010/09/01 PHP
叫你如何修改Nginx与PHP的文件上传大小限制
2014/09/10 PHP
迁移PHP版本到PHP7
2015/02/06 PHP
PHP实现懒加载的方法
2015/03/07 PHP
php计算多维数组中所有值总和的方法
2015/06/24 PHP
php结合md5实现的加密解密方法
2016/01/25 PHP
PHP模板引擎Smarty自定义变量调解器用法
2016/04/11 PHP
HTML5如何适配 iPhone IOS 底部黑条
2021/03/09 HTML / CSS
JQuery 确定css方框模型(盒模型Box Model)
2010/01/22 Javascript
zeroclipboard复制到剪切板的flash
2010/08/04 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
2013/12/16 Javascript
document.addEventListener使用介绍
2014/03/07 Javascript
a标签click和href执行顺序探讨
2014/06/23 Javascript
jQuery实现向下滑出的二级菜单效果实例
2015/08/22 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
2021/01/28 Javascript
简单的分页代码js实现
2016/05/17 Javascript
Javascript闭包与函数柯里化浅析
2016/06/22 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
2016/07/12 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
2016/09/04 Javascript
JSX在render函数中的应用详解
2019/09/04 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
2020/02/15 Javascript
[02:54]辉夜杯主赛事第二日败者组 iG.V赛后采访
2015/12/26 DOTA
python数组复制拷贝的实现方法
2015/06/09 Python
python中快速进行多个字符替换的方法小结
2016/12/15 Python
Python批处理更改文件名os.rename的方法
2018/10/26 Python
基于Numpy.convolve使用Python实现滑动平均滤波的思路详解
2019/05/16 Python
在django admin中添加自定义视图的例子
2019/07/26 Python
Python unittest框架操作实例解析
2020/04/13 Python
jenkins+python自动化测试持续集成教程
2020/05/12 Python
python全栈开发语法总结
2020/11/22 Python
DC Shoes俄罗斯官网:美国滑板鞋和服饰品牌
2020/08/19 全球购物
一份比较全的PHP面试题
2016/07/29 面试题
几个Shell Script面试题
2012/08/31 面试题
教师校本培训方案
2014/02/26 职场文书
代理协议书
2014/04/22 职场文书
Pandas实现DataFrame的简单运算、统计与排序
2022/03/31 Python