VScode常用技巧
Vscode 格式化vue Template代码段
1.安装 vetur
2.在User Setting中增加设置:
“vetur.format.defaultFormatter.html”: “js-beautify-html”
2020.07.08留：我现在已经使用
prettier来格式化代码了
Vs code 添加 wepy template 代码
打开File > preference > user snippets, 选择vue
编辑vue.json
{
"Print to console": {
"prefix": "vue",
"body": [
"<!-- $0 -->",
"<template>",
" <view class='page'> </view>",
"</template>",
"",
"<script>",
"import wepy from 'wepy'",
"export default class Index extends wepy.page {",
"config = {",
" navigationBarTitleText: '场馆预订',",
" usingComponents: {}",
"};",
"",
"components = {};",
"",
"mixins = [];",
"",
"data = {};",
"",
"computed = {};",
"",
"methods = {};",
"",
"events = {};",
"",
"onLoad() {}",
"}",
"</script>",
"<style lang='less'>",
"</style>"
],
"description": "Log output to console"
}
}
使用emmet自动代码补全
打开File > preference > setting, 搜索emmet.triggerExpansionOnTab
设置为true
自动读取eslint文件并进行修复
先安装eslint
设置中添加以下内容
{
"eslint.autoFixOnSave": true, // 启用保存时自动修复,默认只支持.js文件
"eslint.validate": [
"javascript", // 用eslint的规则检测js文件
{
"language": "vue", // 检测vue文件
"autoFix": true // 为vue文件开启保存自动修复的功能
},
{
"language": "html",
"autoFix": true
},
],
}
2020.07.08留：这个配置已经过时了
正则删除HTML标签
Ctrl + H 正则匹配 <[^>]+> 替换为空
正则替换换行
Ctrl + H 正则匹配 \n 替换为你想要的
tab无法缩进代码
按Ctrl + M试试
多光标操作
1、按住alt，用鼠标左键点击，可以出现多个光标，输入的代码可以在光标处同时增加。
2、按住Ctrl + Alt，再按键盘上向上或者向下的键，可以使一列上出现多个光标。
3、选中一段文字，按shift+alt+i，可以在每行末尾出现光标
4、按shift+alt，再使用鼠标拖动，也可以出现竖直的列光标，同时可以选中多列。
版权声明: 本文首发于 指尖魔法屋-VScode常用技巧（https://blog.thinkmoon.cn/post/210_vscode%E5%B8%B8%E7%94%A8%E6%8A%80%E5%B7%A7/） 转载或引用必须申明原指尖魔法屋来源及源地址！