200517

VS Code快捷键与操作

• 重命名类名、变量名
  选中类名、变量名 点击F2进行更改

• 转到变量名的定义处 F12

• 同时选择上一行 Ctrl + Alt + Up或者下一行 Ctrl + Alt + Down)的相同位置

• 找出文中所有的当前选中的单词 Ctrl + D

• 选中文中所有的当前选中的单词 Ctrl + Shift + L

• 删除整行快捷键 Ctrl + Shift + K

• 选中光标所在当前行 Ctrl + L

• 光标在下一行的最前可以直接复制内容到当前行的上一行

• 改变注释颜色
  在settings.json中加入以下代码：

   //改变注释颜色
      "editor.tokenColorCustomizations": {
          "comments": "#ff4f81" // 注释
      }
  

  

• 改变选中与高亮颜色
  在settings.json中加入以下代码：

  //修改选中与高亮颜色
      "workbench.colorCustomizations": {
          "editor.selectionBackground": "#000000",
          "editor.selectionHighlightBackground": "#c5293e"
      }
  

  

• 格式化代码
  Shift+Ctrl+F
  设置Ctrl+S 自动格式化
  
  

  添加以下代码：

  "editor.formatOnType": true, 
  "editor.formatOnSave": true,
  

  保存settings.json。

• 同时添加多个光标
  单个添加: 将光标放在一个位置，然后按住Alt键的时候用鼠标点击其他地方，点到的地方就会添加一个光标出来
  添加一整列: 按住Shift+Alt然后鼠标下拉，即可添加一整列光标

错误

• js拼错定义的类名
  怎么解决？

忘掉的语法

• <link type="text/css" rel="styleSheet" href="CSS文件路径" />
<style type="text/css"> @import url("css文件路径"); </style>

插件

• js doc
  /**写注释 Ctrl+Shift+D
  
• JavaScript Snippets
  JS代码片段补全
• JavaScript (ES6) code snippets
  ES6的代码片段

解决问题

• 怎么截会动的截图
• 总是输错JS类名（HTML、JS的联动）
• 修改注释字体

解决的问题

• CSDN代码块底色修改方法
  博客管理-博客设置
  
  

JS缩写快速输入

• Console相关语法

  [cd] console.dir

  console.dir(${1:obj});
  

  [ce] console.error

  console.error(${1:obj});
  

  [ci] console.info

  console.info(${1:obj});
  

  [cl] console.log

  console.log(${1:obj});
  

  [cw] console.warn

  console.warn(${1:obj});
  

  [de] debugger

  debugger;
  

• DOM相关语法

  [ae] addEventListener

  ${1:document}.addEventListener('${2:event}', function(e) {
      ${0:// body...}
  });
  

  [ac] appendChild

  ${1:document}.appendChild(${2:elem});
  

  [rc] removeChild

  ${1:document}.removeChild(${2:elem});
  

  [cel] createElement

  ${1:document}.createElement(${2:elem});
  

  [cdf] createDocumentFragment

  ${1:document}.createDocumentFragment();
  

  [ca] classList.add

  ${1:document}.classList.add('${2:class}');
  

  [ct] classList.toggle

  ${1:document}.classList.toggle('${2:class}');
  

  [cr] classList.remove

  ${1:document}.classList.remove('${2:class}');
  

  [gi] getElementById

  ${1:document}.getElementById('${2:id}');
  

  [gc] getElementsByClassName

  ${1:document}.getElementsByClassName('${2:class}');
  

  [gt] getElementsByTagName

  ${1:document}.getElementsByTagName('${2:tag}');
  

  [ga] getAttribute

  ${1:document}.getAttribute('${2:attr}');
  

  [sa] setAttribute

  ${1:document}.setAttribute('${2:attr}', ${3:value});
  

  [ra] removeAttribute

  ${1:document}.removeAttribute('${2:attr}');
  

  [ih] innerHTML

  ${1:document}.innerHTML = '${2:elem}';
  

  [tc] textContent

  ${1:document}.textContent = '${2:content}';
  

  [qs] querySelector

  ${1:document}.querySelector('${2:selector}');
  

  [qsa] querySelectorAll

  ${1:document}.querySelectorAll('${2:selector}');
  

• Loop相关语法

  [fe] forEach

  ${1:myArray}.forEach(function(${2:elem}) {
      ${0:// body...}
  });
  

  [fi] for in

  for (${1:prop} in ${2:obj}) {
      if (${2:obj}.hasOwnProperty(${1:prop})) {
          ${0:// body...}
      }
  }
  

• Function相关语法

  [fn] function

  function ${1:methodName} (${2:arguments}) {
      ${0:// body...}
  }
  

  [afn] anonymous function

  function(${1:arguments}) {
      ${0:// body...}
  }
  

  [pr] prototype

  ${1:ClassName}.prototype.${2:methodName} = function(${3:arguments}) {
      ${0:// body...}
  }
  

  [iife] immediately-invoked function expression

  (function(${1:window}, ${2:document}) {
      ${0:// body...}
  })(${1:window}, ${2:document});
  

  [call] function call

  ${1:methodName}.call(${2:context}, ${3:arguments})
  

  [apply] function apply

  ${1:methodName}.apply(${2:context}, [${3:arguments}])
  

  [ofn] function as a property of an object

  ${1:functionName}: function(${2:arguments}) {
      ${3:// body...}
  }
  

• JSON相关语法

  [jp]JSON.parse

  JSON.parse(${1:obj});
  

  [js] JSON.stringify

  JSON.stringify(${1:obj});
  

• Timer相关语法

  [si] setInterval

  setInterval(function() {
      ${0:// body...}
  }, ${1:delay});
  

  [st] setTimeout

  setTimeout(function() {
      ${0:// body...}
  }, ${1:delay});
  

• NodeJS相关语法

  [ase] assert.equal

  assert.equal(${1:actual}, ${2:expected});
  

  [asd] assert.deepEqual

  assert.deepEqual(${1:actual}, ${2:expected});
  

  [asn] assert.notEqual

  assert.notEqual(${1:actual}, ${2:expected});
  

  [me] module.exports

  module.exports = ${1:name};
  

  [pe] process.exit

  process.exit(${1:code});
  

  [re] require

  require('${1:module}');
  

• BDD相关语法

  [desc] describe

  describe('${1:description}', function() {
      ${0:// body...}
  });
  

  [ita] it asynchronous

  it('${1:description}', function(done) {
      ${0:// body...}
  });
  

  [its] it synchronous

  it('${1:description}', function() {
      ${0:// body...}
  });
  

  [itp] it pending

  it('${1:description}');
  

  • Misc相关语法

  [us] use strict

  'use strict';
  

  [al] alert

  alert('${1:msg}');
  

  [co] confirm

  confirm('${1:msg}');
  

  [pm] prompt

  prompt('${1:msg}');