学习ide功能

image.png

image.png

ctrl p

  1. let favoriteAnimals = ['dog', 'cat', 'unicorn'];
  2. function pickAnimal(arr) {
  3. const rnd = arr.length * Math.random();
  4. return arr[Math.floor()];
  5. }
  6. 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. }
  10. let myBooks = [
  11. {title: 'Harry Potter', author: 'J. K. Rowling'},
  12. {title: 'Lord of the Rings', author: 'J. R. R. Tolkien'},
  13. {title: 'The Hobbit', author: 'J. R. R. Tolkien'}
  14. ];
  15. listBookAuthors(myBooks);

f2

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

选中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. }
  10. let myBooks = [
  11. {title: 'Harry Potter', author: 'J. K. Rowling'},
  12. {title: 'Lord of the Rings', author: 'J. R. R. Tolkien'},
  13. {title: 'The Hobbit', author: 'J. R. R. Tolkien'}
  14. ];
  15. listBookAuthors(myBooks);

image.png

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

一次重命名
image.png

重命名第二次
image.png

选中author,引入变量
image.png

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

替换两个

image.png

格式化

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+向上
移动整个标签

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

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

ctrl+D复制所选行
ctrl+Y删除整行
ctrl+/ 注释一行

导航

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

ctrl+e
image.png
image.png
结构

alt+7结构

结构输入代码
image.png

enter回车键,可以定位到代码
image.png

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

shift+esc,退出上面窗口

按两下shift
image.png

ctrl+shift+a 或tab切换
image.png

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

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

调试

ctrl+shift+f10

运行js代码

总结

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