webstorm和vscode使用技巧（持续更新）

webstorm使用技巧
1、修改模板（如vue组件模板）
file--settting--搜template--flie and code template--vue single file component

原来模板
修改后模板

vscode使用技巧
1、新建vue组件模板是没有内容的，所以需要我们安装两个插件Vetur和 Vue VSCode Snippets

Vue VSCode Snippets首页很多快捷键介绍

2、webstorm和vscode：JS或TS里面使用@
第一种写法：import HelloWorld from "../components/HelloWorld.vue";
第二种写法：import HelloWorld from "@/components/HelloWorld.vue";
前者写法后缀可以不加.vue，后者要加.vue，建议使用第二种写法，这样不需要知道文件夹外面结构层是上一级或者上上级。第二种写法，鼠标移到Helloworld.vue上，按住ctrl点击，就能跳转对应组件上内容

3、webstorm和vscode：CSS或SCSS里使用@
第一种写法:@import "../assets/style/test.scss";
第二种写法:@import "~@/assets/style/test.scss";
建议第二种写法，原理和JS加@一样。不过webstorm需要单独自配置如下：
file--settting--搜webpack--munually--找到自己目录名字-node_modules--@vue\cli-service--webpack.config.js--点击OK完成

4、webstorm中使用TS，那router里面代码需要加分号的，我们可以按两次shift键，搜reformat显示快捷键，操作快捷键就能给你的router代码自动配上分号。如果你发现不能按快捷键也没有用，你需要进行如下配置
file--settting--搜editor--code style--typescripe--punctuation

1.png

5、vue.config.js 报 eslint 错误怎么办？
/* eslint-disable */把这句话添加到 vue.config.js 的第一行即可