您的位置:首页 > Web前端 > Vue.js

Vue学习笔记:提升开发效率和体验的常用工具

2019-11-23 13:55 1176 查看

Vetur

用途:

  • 语法高亮
  • 标签补全,模板生成
  • Lint检查
  • 格式化
vs code环境配置文件
  • 文件-->首选项-->搜索veture(找不到需要自行安装)-->在setting.json中编辑
  • 配置文件代码如下:
{
"extensions.ignoreRecommendations": false,
"team.showWelcomeMessage": false,
"git.enableSmartCommit": true,
"vsicons.dontShowNewVersionMessage": true,
"git.autofetch": true,
"react.beautify.onSave": true,
"files.associations": {
"*.js": "javascriptreact"
},
"git.confirmSync": false,
"explorer.confirmDelete": false,
"[markdown]": {},
"eslint.enable": true,
"eslint.options": {
"extensions": [
".js",
".jsx",
".vue"
]
},
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
"vetur.validation.template": false,
"eslint.autoFixOnSave": true,
"editor.tabSize": 2,
"jest.autoEnable": false,
"jest.pathToConfig": "./.jest.js",
"terminal.integrated.rendererType": "dom",
"window.zoomLevel": 0,
"editor.quickSuggestions": {
"strings": true
},
"diffEditor.renderSideBySide": true
}

 

vs code快速生成组件的快捷键
  • 文件-->首选项-->用户代码片段-->输入框输入vue.json
  • 将如下代码复制到文件中
"Print to console": {
"prefix": "vue",
"body": [
"<!-- $0 -->",
"<template>",
"  <div></div>",
"</template>",
"",
"<script>",
"export default {",
"  data () {",
"    return {",
"    }",
"  }",
"}",
"",
"</script>",
"",
"<style lang='stylus' scoped>",
"",
"</style>",
""
],
"description": "Log output to console"
}

 

ESLint

用途

  • 代码规范
  • 错误检查

Prettier

  • 格式美化

Vue-devtools

chrome插件

  • 远程调试
  • 性能监测
  • 集成vue

 

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: