VSCode中配置TypeScript自动编译（vscode自动编译less）

在VSCode中配置TypeScript自动编译，可以通过以下几个步骤来实现：

1、安装TypeScript和tsconfig.json配置

确保已经安装了Node.js环境。

打开终端，使用以下命令安装TypeScript：

“`

npm install g typescript

“`

在项目根目录下创建一个tsconfig.json文件，可以使用以下命令创建：

“`

tsc init

“`

打开tsconfig.json文件，配置如下：

“`json

{

"compilerOptions": {

"target": "es5",

"module": "commonjs",

"sourceMap": true,

"outDir": "./dist",

"strict": true,

"allowSyntheticDefaultImports": true,

"esModuleInterop": true

},

"include": ["src/**/*"],

"exclude": ["node_modules"]

}

“`

2、安装并配置tslint（可选）

如果需要使用tslint进行代码检查，可以安装tslint：

“`

npm install g tslint

“`

在项目根目录下创建一个tslint.json文件，可以使用以下命令创建：

“`

tslint init

“`

根据需要配置tslint.json文件。

3、安装并配置Prettier（可选）

如果需要使用Prettier进行代码格式化，可以安装Prettier：

“`

npm install g prettier

“`

在项目根目录下创建一个.prettierrc文件，可以使用以下命令创建：

“`

npx prettier init

“`

根据需要配置.prettierrc文件。

4、安装并配置ESLint（可选）

如果需要使用ESLint进行代码检查，可以安装ESLint：

“`

npm install g eslint

“`

在项目根目录下创建一个.eslintrc.json文件，可以使用以下命令创建：

“`

npx eslint init

“`

根据需要配置.eslintrc.json文件。

5、安装并配置webpack（可选）

如果需要使用webpack进行模块打包，可以安装webpack：

“`

npm install g webpack webpackcli

“`

在项目根目录下创建一个webpack.config.js文件，根据需要配置。

6、配置VSCode自动编译

打开VSCode，点击左侧的扩展图标，搜索并安装以下扩展：

TypeScript and JavaScript Language Features (ES7+) (版本 4.1.0 以上)

ESLint

Prettier Code formatter

Auto Close Tag

Live Server

Vetur

打开设置，搜索“typescript”，勾选“TypeScript and JavaScript Language Features”下的所有选项。

打开设置，搜索“eslint”，勾选“ESLint”下的“Enabled”选项。

打开设置，搜索“prettier”，勾选“Prettier”下的“Editor: Format On Save”选项。

打开设置，搜索“autoClose”，勾选“Auto Closing Pairs”下的“enabled”选项。

打开设置，搜索“liveServer”，勾选“Live Server”下的“Enable Live Server”选项。

打开设置，搜索“vetur”，勾选“Vetur”下的所有选项。

7、配置自动编译任务

在项目根目录下创建一个tasks.json文件，内容如下：

“`json

{

"version": "2.0.0",

"tasks": [

{

"label": "build",

"type": "shell",

"command": "tsc",

"group": {

"kind": "build",

"isDefault": true

},

"presentation": {

"reveal": "always"

},

"problemMatcher": "$tsc"

}

]

}

“`

保存tasks.json文件。

现在，当你在VSCode中编辑TypeScript文件时，它会自动编译并将结果输出到dist目录中，你还可以使用右键菜单中的“构建”选项来手动触发编译任务。