名稱

簡述

Auto Close Tag

自動閉合HTML標(biāo)簽

Auto Import

import提示

Auto Rename Tag

修改HTML標(biāo)簽時，自動修改匹配的標(biāo)簽

Babel JavaScript

babel插件，語法高亮

Babelrc

.babelrc文件高亮提示

Beautify css/sass/scss/less

css/sass/less格式化

Better Align

對齊賦值符號和注釋

Better Comments

編寫更加人性化的注釋

Bookmarks

添加行書簽

Bracket Lens

在閉合的括號處提示括號頭部的代碼

Bracket Pair Colorizer 2

用不同顏色高亮顯示匹配的括號

Can I Use

HTML5、CSS3、SVG的瀏覽器兼容性檢查

Code Outline

展示代碼結(jié)構(gòu)樹

Code Runner

運行選中代碼段（支持多數(shù)語言）

Code Spell checker

單詞拼寫檢查

CodeBing

快速打開Bing并搜索，可配置搜索引擎

Color Highlight

顏色值在代碼中高亮顯示

Color Info

小窗口顯示顏色值，rgb,hsl,cmyk,hex等等

Color Picker

拾色器

CSS-in-JS

CSS-in-JS高亮提示和轉(zhuǎn)換

Dash

集成Dash

Debugger for Chrome

調(diào)試Chrome

Document This

注釋文檔生成

DotENV

.env文件高亮

Edit csv

編輯CSV文件

EditorConfig for VS Code

EditorConfig插件

Emoji

在代碼中輸入emoji

endy

將輸入光標(biāo)跳轉(zhuǎn)到當(dāng)前行最后面

Error Gutters

在行號處提示錯誤代碼

ESLint

ESLint插件，高亮提示

File Peek

根據(jù)路徑字符串，快速定位到文件

filesize

狀態(tài)欄顯示當(dāng)前文件大小

Find-Jump

快速跳轉(zhuǎn)到指定單詞位置

Font-awesome codes for html

FontAwesome提示代碼段

ftp-sync

同步文件到ftp

Git Blame

在狀態(tài)欄顯示當(dāng)前行的Git信息

Git File History

快速瀏覽單文件歷史提交變動

Git Graph

Git圖形化視圖，方便瀏覽和操作

Git History(git log)

查看git log

Git Tree Compare

Git樹形比對，查看不同分支的差異

gitignore

.gitignore文件語法

GitLens

顯示文件最近的commit和作者，顯示當(dāng)前行commit信息

GraphQL for VSCode

graphql高亮和提示

Guides

高亮縮進(jìn)基準(zhǔn)線

Gulp Snippets

Gulp代碼段

Highlight Matching Tag

高亮匹配選中的標(biāo)簽

HTML CSS Class Completion

CSS class提示

HTML CSS Support

css提示（支持vue）

HTMLHint

HTML格式提示

htmltagwrap

快捷包裹html標(biāo)簽

htmltagwrap

包括HTML

Import Beautify

import分組、排序、格式化

Import Cost

行內(nèi)顯示導(dǎo)入（import/require）的包的大小

Indenticator

縮進(jìn)高亮

IntelliSense for css class names

css class輸入提示

JavaScript (ES6) code snippets

ES6語法代碼段

JavaScript Standard Style

Standard風(fēng)格

Jest Runner

支持執(zhí)行Jest單個測試文件或單個用例

JS Refactor

代碼重構(gòu)工具，提取函數(shù)、變量重命名等等

JSON to TS

JSON結(jié)構(gòu)轉(zhuǎn)化為typescript的interface

JSON Tools

格式化和壓縮JSON

jumpy

快速跳轉(zhuǎn)到指定單詞位置

language-stylus

Stylus語法高亮和提示

Less IntelliSense

less變量與混合提示

Lodash

Lodash代碼段

Log Wrapper

生產(chǎn)打印選中變量的代碼

markdownlint

Markdown格式提示

MochaSnippets

Mocha代碼段

Node modules resolve

快速導(dǎo)航到Node模塊

npm

運行npm命令

npm Intellisense

導(dǎo)入模塊時，提示已安裝模塊名稱

Output Colorizer

彩色輸出信息

Partial Diff

對比兩段代碼或文件

Parameter Hints

在函數(shù)調(diào)用處指示參數(shù)名稱

Path Autocomplete

路徑完成提示

Path Intellisense

另一個路徑完成提示

Polacode

將代碼生成圖片

PostCss Sorting

css排序

Prettier - Code formatter

prettier官方插件

Prettify JSON

格式化JSON

Project Manager

快速切換項目

Quokka.js

不需要手動運行，行內(nèi)顯示變量結(jié)果

Rainbow CSV

CSV文件使用彩虹色渲染不同列

React Native Storybooks

storybook預(yù)覽插件，支持react

React Playground

為編輯器提供一個react組件運行環(huán)境，方便調(diào)試

React Standard Style code snippets

react standar風(fēng)格代碼塊

REST Client

發(fā)送REST風(fēng)格的HTTP請求

Sass

sass插件

Settings Sync

VSCode設(shè)置同步到Gist

Sort lines

排序選中行

Sort Typescript Imports

typescript的import排序

String Manipulation

字符串轉(zhuǎn)換處理（駝峰、大寫開頭、下劃線等等）

stylelint

css/sass/less代碼風(fēng)格

SVG Viewer

SVG查看器

Syncing

vscode設(shè)置同步到gist

Test Spec Generator

測試用例生成（支持chai、should、jasmine）

TODO Parser

Todo管理

Todo Todo Tree

收集代碼中的TODO注釋，支持快速搜索

Toggle Quotes

切換JS中的引號，" -> ' -> `

TS/JS postfix completion

ts/js后綴提示

TSLint

TypeScript語法檢查

Types auto installer

自動安裝@types聲明依賴

TypeScript Hero

TypeScript輔助插件，管理import、outline等等

TypeScript Import

TS自動import

TypeScript Import Sorter

import整理排序

Typescript React code snippets

React Typescript代碼段

TypeSearch

TS聲明文件搜索

Version Lens

package.json文件顯示模塊當(dāng)前版本和最新版本

vetur

Vue插件

Volar

Vue插件，支持Vue3

View Node Package

快速打開選中模塊的主頁和代碼倉庫

Visual Studio IntelliCode

基于AI的代碼提示

VS Live Share

實時多人協(xié)助

VSCode Great Icons

文件圖標(biāo)拓展

vscode-database

操作數(shù)據(jù)庫，支持mysql和postgres

vscode-icons

文件圖標(biāo)，方便定位文件

vscode-random

隨機(jī)字符串生成器

vscode-spotify

集成spotify，播放音樂

vscode-styled-components

styled-components高亮支持

vscode-styled-jsx

styled-jsx高亮支持

Vue Peek

支持跳轉(zhuǎn)到Vue組件定義文件

Vue TypeScript Snippets

Vue Typescript代碼段

VueHelper

Vue2代碼段（包括Vue2 api、vue-router2、vuex2）

Wallaby.js

實時測試插件

Wrap Console Log Lite

對選中代碼快速console.log

名稱

預(yù)覽

Atom One Light Theme

bluloco-dark

bluloco-light

Enki Theme

eppz! (C# theme for Unity)

Eva Theme

Flat UI

GitHub Theme

Monokai Pro

New Moon VSCode

One Dark Pro

Plastic

spacegray-vscode

Splus

單詞

功能描述

script

將JavaScript代碼寫在html文件中，例如：

<body>

<script>

//此處寫JavaScript代碼

</script>

</body>

引入.js格式的文件，例如：

<script src="此處寫js文件所在的路徑"></script>

單詞

功能描述

alert()

彈出警告框

console.log()

控制臺輸出

單詞

功能描述

var

使用var可以聲明變量，例如：var num = 1;表示聲明一個名稱為num，值為1的變量

變量的合法命名：

1、只能由數(shù)字、字母、下劃線和$組成，但不能以數(shù)字開頭

2、不建議使用關(guān)鍵字和保留字

3、嚴(yán)格區(qū)分大小寫，A和a是兩個不同的變量

單詞

功能描述

typeof

檢測值或者變量的數(shù)據(jù)類型

單詞

功能描述

NaN

表示非數(shù)字，是一個特殊的數(shù)值

isNaN()

用來檢測一個值是否為NaN ，是的話返回true，否則返回false

單詞

功能描述

Number

數(shù)值類型，所有的數(shù)字不分大小、不分正負(fù)、不分正負(fù)，都是數(shù)值類型

String

字符串類型，使用雙引號或者單引號包裹的值

Boolean

布爾類型，true表示真，false表示假

Undefined

1、變量沒有賦值，默認(rèn)為undefined

2、變量聲明提升時，變量的值也為undefined

undefined的類型也為undefined

Null

null表示空，用typeof檢測null，結(jié)果為object

單詞

功能描述

length

表示字符串的長度

單詞

功能描述

charAt()

獲取指定位置的字符

substring()

提取字符串中，介于兩個指定下標(biāo)之間的字符

substr()

在字符串中指定的位置處，提取指定數(shù)目的字符

slice()

提取字符串的某個部分，類似于substring() ，不同之處：

1、substring() 可以自動交換參數(shù)的位置，而slice()不行。

2、slice()的第一個參數(shù)可以是負(fù)數(shù)，而substring()不行

toUpperCase()

把字符串轉(zhuǎn)換為大寫

toLowerCase()

把字符串轉(zhuǎn)換為小寫

indexOf

返回字符串中指定字符首次出現(xiàn)的索引

單詞

功能描述

Number()

將其他類型的值轉(zhuǎn)換為數(shù)字

parseInt()

可以將參數(shù)轉(zhuǎn)成整數(shù)

parseFloat()

可以將參數(shù)轉(zhuǎn)成浮點數(shù)

String()

將其他類型的值轉(zhuǎn)換成字符串，例如：String(123)

toString()

將其他類型的值轉(zhuǎn)換成字符串，例如：(6).toString()

和String()的區(qū)別：

1、toString()無法轉(zhuǎn)換null和undefined，String()可以轉(zhuǎn)換null和undefined

2、toString()可增加進(jìn)制參數(shù)，將字符串進(jìn)行進(jìn)制轉(zhuǎn)換，String()不能轉(zhuǎn)換進(jìn)制

3、寫法不同，可參考上述例子

Boolean()

將其他類型的值轉(zhuǎn)換為布爾值

單詞

功能描述

prompt()

彈出輸入框

單詞

功能描述

Array、Object、Function

數(shù)組、對象、函數(shù)

單詞

功能描述

+

加法運算符。加號有兩種作用，分別是加法和連字符

1、加號兩邊的操作數(shù)都是數(shù)字，則為加法

2、有一個操作數(shù)為字符串，則為連字符

-

減法運算符

*

乘法運算符

/

除法運算符

%

取余運算符。例如：a%b代表a除以b的余數(shù)，8 %5 = 3

單詞

功能描述

toFixed()

指定小數(shù)點后面的位數(shù)

單詞

功能描述

Math.pow(x,y)

返回x的y次冪（不常用，了解即可）

Math.sqrt()

返回一個數(shù)的平方根（不常用，了解即可）

Math.ceil()

向上取整

Math.floor()

向下取整

單詞

功能描述

>

大于

<

小于

>=

大于等于

<=

小于等于

==

等于

!=

不等于

===

全等于

!==

不全等于

單詞

功能描述

!

非

&&

與

||

或

單詞

功能描述

=

賦值

+=

快捷賦值，例如： a+=1等價與a=a+1

-=

快捷賦值，例如： a-=1等價與a=a-1

*=

快捷賦值，例如： a*=1等價與a=a*1

/=

快捷賦值，例如： a/=1等價與a=a/1

%=

快捷賦值，例如： a%=1等價與a=a%1

++

自增運算 ，例如：

var num1 = 3;

num1++

console.log(num1)//num的值為4

--

自減運算，例如：

var num2 = 3;

num2--

console.log(num2)//num2的值為2

單詞

功能描述

if

當(dāng)指定條件為 true 時，執(zhí)行if語句對應(yīng)的代碼

if...else

當(dāng)條件為 true 時，執(zhí)行if語句對應(yīng)的代碼

當(dāng)條件為 false 時，執(zhí)行else語句對應(yīng)的代碼

if...else if...

滿足條件時，執(zhí)行它所對應(yīng)的代碼

case

在switch中使用，表示要匹配的每一種情況

default

在switch中使用，表示默認(rèn)情況，當(dāng)不滿足所有的case條件時，會執(zhí)行默認(rèn)情況

switch

根據(jù)不同的條件來執(zhí)行不同的動作。示例：

switch (month) {

case 1:

alert("這個月有31天")

break;

case 4:

alert("這個月有30天")

break;

default:

alert("請輸入正確的月份！！")

}

boolean_expression ? true_value : false_value

三元運算符，當(dāng)條件表達(dá)式boolean_expression為真，執(zhí)行表達(dá)式true_value，為假時執(zhí)行表達(dá)式false_value

單詞

功能描述

for

循環(huán)執(zhí)行一段代碼

示例： for(var i = 0; i <10;i++) {

console.log(i);

}

while

條件為真時循環(huán)執(zhí)行代碼塊

do-while

while 循環(huán)的變體，語法：

do{

循環(huán)體

}while(循環(huán)執(zhí)行條件)

注意事項：

1、do-while循環(huán)在檢查條件之前一定會執(zhí)行一次循環(huán)體

2、如果條件為真，就會繼續(xù)執(zhí)行循環(huán)體

3、如果條件為假，則會終止循環(huán)

單詞

功能描述

break

用于退出循環(huán)

1、在switch中使用，用于跳出switch語句

2、在循環(huán)for、while中使用，直接跳出循環(huán)

continue

跳出當(dāng)前循環(huán)，繼續(xù)執(zhí)行下一次循環(huán)

單詞

功能描述

Array

數(shù)組， 用來存儲一組值

new

與Array結(jié)合使用，創(chuàng)建數(shù)組，示例：new Array()

（new是JavaScript中的一個關(guān)鍵字，用來實例化對象的，后面的面向?qū)ο笳鹿?jié)中會有詳細(xì)的講解，目前了解即可）

單詞

功能描述

Array.isArray()

檢測數(shù)據(jù)是否是一個數(shù)組，返回布爾值

單詞

功能描述

length

返回數(shù)組長度

單詞

功能描述

push()

在尾部插入新項

pop()

刪除數(shù)組的最后一項

unshift()

在頭部插入新項

shift()

刪除數(shù)組的第一項

splice()

用于添加或刪除數(shù)組的元素

slice()

從已有的數(shù)組中返回選定的元素

concat()

合并多個數(shù)組

reverse()

顛倒數(shù)組中元素的順序

indexOf()

返回指定元素的索引值，如果不存在返回-1

includes()

判斷一個數(shù)組是否包含指定的值，返回布爾值

• sort()

用于數(shù)組排序（涉及到函數(shù)知識，在函數(shù)一節(jié)再進(jìn)行詳細(xì)的講解）

join()

將數(shù)組轉(zhuǎn)成字符串

單詞

功能描述

split()

將字符串轉(zhuǎn)成數(shù)組