学习ide功能

image.png

image.png

代码补全

image.png

ctrl p快速查找方法和函数的情况

  1. let favoriteAnimals = ['dog', 'cat', 'unicorn'];
  3. function pickAnimal(arr) {
  4.     const rnd = arr.length * Math.random();
  5.     return arr[Math.floor()];
  6. }
  8. console.log();

image.png

光标放()中，按ctrl p
image.png

ctrl q查找函数方法文档

选中floor，按一下ctrl q
image.png

选中floor，按两下ctrl p
image.png

Code Inspections代码检测

image.png

image.png

  1. function listBookAuthors(books) {
  2.     let listOfAuthors = [];
  3.     books.forEach(function () {
  4.         if (!listOfAuthors.includes(book.author)) {
  5.             listOfAuthors.push(book.author);
  6.         }
  7.     });
  8.     return listOfAuthors;
  9. }
  11. let myBooks = [
  12.     {title: 'Harry Potter', author: 'J. K. Rowling'},
  13.     {title: 'Lord of the Rings', author: 'J. R. R. Tolkien'},
  14.     {title: 'The Hobbit', author: 'J. R. R. Tolkien'}
  15. ];
  16. listBookAuthors(myBooks);

f2查看问题、建议或从一个问题跳转到另一个

image.png
选中高亮的book，book下面有波浪线
选中第4行高亮的book，按f2，跳转到下一个book，并显示信息

alt+enter建议执行选项

创建变量

选中book按alt+enter
image.png
创建形参
image.png

转为箭头函数

选中function，有图标
image.png
image.png

选中function，按alt enter
image.png
转为箭头函数
image.png

Refactoring your code正在重构你的代码

  1. function listBookAuthors(books) {
  2.     let listOfAuthors = [];
  3.     books.forEach(book => {
  4.         if (!listOfAuthors.includes(book.author)) {
  5.             listOfAuthors.push(book.author);
  6.         }
  7.     });
  8.     return listOfAuthors;
  9. }
  11. let myBooks = [
  12.     {title: 'Harry Potter', author: 'J. K. Rowling'},
  13.     {title: 'Lord of the Rings', author: 'J. R. R. Tolkien'},
  14.     {title: 'The Hobbit', author: 'J. R. R. Tolkien'}
  15. ];
  17. listBookAuthors(myBooks);

image.png

ctrl alt shift t重构大面板

选中books，按ctrl alt shift t
image.png

重命名一次shift+f6

一次重命名
image.png

重命名二次

重命名第二次
image.png

引入变量ctrl+alt+v

选中author，引入变量
image.png

选中book.author,替换全部2个匹配项
image.png

替换两个

image.png

代码编辑技巧和窍门

image.png

格式化ctrl+alt+L

ctrl+alt+L

  1.         <!doctype html><html lang="en">
  2. <head>
  3.   <meta charset="UTF-8">
  4.   <title>Multiple selections</title>
  5. </head>
  6. <body>
  7. <table>
  8.   <tr>
  9.       <td>Jackson</td>
  10.      <td>Eve</td>
  11.     <td>24</td>
  12.   </tr>
  13.   <tr>
  14.     <td>First name</td>
  15.     <td>Last name</td>
  16.     <td>Age</td>
  17.   </tr>
  18. </table>
  19. </body>
  20.   </html>

image.png

ctrl+w选中标签，选择块

ctrl+shift+w取消选中

ctrl+/ 每行格式化

image.png

ctrl+shift+/ 多行格式化

image.png

ctrl+shift+向上 移动整个标签，向上移动所选

移动整个标签

alt+j选中多个内容，多行同时操作

选中td，按alt+j，选中标签
image.png

alt+j多行选中模式
image.png

esc：退出多行选择模式

退出多行选择模式

ctrl+D复制所选行

ctrl+Y删除整行

ctrl+/ 注释一行

导航

image.png

  1. import {Pet} from './pet';
  3. export class Dog extends Pet {
  4.     constructor(name, ownerName, breed) {
  5.         super(name, ownerName);
  6.         this.breed = breed;
  7.     }
  9.     giveTreat(favoriteTreat) {
  10.         console.log(`${this.ownerName} gives ${this.name} ${favoriteTreat}`)
  11.     }
  12. }
  14. let snoopy = new Dog('Snoopy', 'Charlie', 'Beagle');
  16. snoopy.giveTreat('pizza');

ctrl+e调出最近文件

image.png
image.png
结构

alt+7结构

结构输入代码
image.png

查找enter回车键，可以定位到代码

image.png

查找方法的使用alt+f7

在第9行，选中giveTreat，alt+f7
image.png

shift+esc，退出上面窗口

按两下shift，搜索大面板

image.png

ctrl+shift+a 或tab切换

image.png

输入声明查找快捷键，查找操作
image.png

前往声明或用法，ctrl+b

选中giveTreat，前往声明或用法，ctrl+b
image.png

ctrl+shift+A查找操作

webStrom调试器101

调试前：运行/调试配置

image.png

ctrl+shift+f10运行代码

运行js代码

编辑配置

image.png

调试代码：第一部分

image.png

总结

ctrl q
ctrl+shift+alt+t
ctrl+e
两下shift
shift+esc