WebStorm快捷键及配置

常用快捷键

• ctrl + shift + n: 打开工程中的文件，目的是打开当前工程下任意目录的文件。
• ctrl + j: 输出模板
• ctrl + b: 跳到变量申明处
• ctrl + alt + T: 围绕包裹代码(包括zencoding的Wrap with Abbreviation)
• ctrl + []: 匹配 {}[]
• ctrl + F12: 可以显示当前文件的结构
• ctrl + x: 剪切(删除)行，不选中，直接剪切整个行，如果选中部分内容则剪切选中的内容
• alt + left/right:标签切换
• ctrl + r: 替换
• ctrl + shift + up: 行移动
• shift + alt + up: 块移动(if(){},while(){}语句块的移动)
• ctrl + d: 行复制
• ctrl + / : 单行注释
• ctrl + shift + / : 块注释
• ctrl + shift + i : 显示当前CSS选择器或者JS函数的详细信息
• ctrl + ‘-/+’: 可以折叠项目中的任何代码块，它不是选中折叠，而是自动识别折叠。
• ctrl + ‘.’: 折叠选中的代码的代码。
• ctrl+/ 单行注释
• ctrl+shift+/块注释
• ctrl+shift+ +/-展开/折叠
• ctrl+alt+L 格式化代码
• ctrl+shift+ up/down 上下移动句子
• Alt+回车 导入包,自动修正
• Ctrl+N 查找类
• Ctrl+Shift+N 查找文件
• Ctrl+Alt+L 格式化代码
• Ctrl+Alt+O 优化导入的类和包
• Alt+Insert 生成代码(如get,set方法,构造函数等)
• Ctrl+E或者Alt+Shift+C 最近更改的代码
• Ctrl+R 替换文本
• Ctrl+F 查找文本
• Ctrl+Shift+Space 自动补全代码
• Ctrl+空格 代码提示
• Ctrl+Alt+Space 类名或接口名提示
• Ctrl+P 方法参数提示
• Ctrl+Shift+Alt+N 查找类中的方法或变量
• Alt+Shift+C 对比最近修改的代码
• Shift+F6 重构-重命名
• Ctrl+Shift+先上键
• Ctrl+X 删除行
• Ctrl+D 复制行
• Ctrl+/ 或 Ctrl+Shift+/ 注释（// 或者/…/ ）
• Ctrl+J 自动代码
• Ctrl+E 最近打开的文件
• Ctrl+H 显示类结构图
• Ctrl+Q 显示注释文档
• Alt+F1 查找代码所在位置
• Alt+1 快速打开或隐藏工程面板
• Ctrl+Alt+ left/right 返回至上次浏览的位置
• Alt+ left/right 切换代码视图
• Alt+ Up/Down 在方法间快速移动定位
• Ctrl+Shift+Up/Down 代码向上/下移动。
• F2 或Shift+F2 高亮错误或警告快速定位代码标签输入完成后，按Tab，生成代码。
• 选中文本，按Ctrl+Shift+F7 ，高亮显示所有该文本，按Esc高亮消失。
• Ctrl+W 选中代码，连续按会有其他效果
• 选中文本，按Alt+F3 ，逐个往下查找相同文本，并高亮显示。
• Ctrl+Up/Down 光标跳转到第一行或最后一行下
• Ctrl+B 快速打开光标处的类或方法

配置相关

webpack配置alias别名设置

1. 在项目根目录下新建alias.config.js文件，加入如下内容

   const resolve = dir => require('path').join(__dirname, dir)
   
   module.exports = {
       resolve: {
           alias: {
               '@': resolve('src')
           }
       }
   }

2. 配置idea，以webstorm为例：settings -> Languages & Frameworks -> JavaScript -> Webpack在右边选择刚才创建的文件路径

快捷修复stylelint报错

1.全局安装stylelint

npm i stylelint -g

 2.添加配置

 3.添加快捷键