1. 什么是VSCode智能提示
VSCode是一个轻量级、开源、跨平台的代码编辑器。与其他编辑器相比，它拥有着强大的插件系统和智能提示功能。智能提示指的是，当我们在写代码的时候，VSCode会根据上下文自动补全代码，提供代码建议和函数参数提示等等。这些提示能够帮助我们快速编写出正确的代码，提高开发效率。
然而，默认情况下，VSCode的智能提示并不是开启的。这篇文章将会详细介绍如何正确地开启VSCode的智能提示功能。
2. 如何在VSCode中开启智能提示
2.1 安装必要的插件
要在VSCode中开启智能提示，我们需要先安装一些必要的插件。主要有以下几个：
Language Support for JavaScript（或其他语言支持插件）
ESLint（用于代码检查）
Prettier（代码格式化工具）
安装这些插件的方法非常简单。我们只需在VSCode中打开插件面板（快捷键：Ctrl+Shift+X），然后搜索并安装上述三个插件即可。
2.2 配置VSCode用户设置
安装完插件之后，我们还需要在VSCode的用户设置中增加一些配置。这些配置将会决定智能提示的行为。
首先，我们需要在用户设置中增加以下两个配置项：
"editor.quickSuggestions": {
"other": true,
"comments": false,
"strings": true
},
"editor.wordBasedSuggestions": false,
"editor.quickSuggestions" 配置项决定了哪些类型的代码可以触发智能提示。在上面的配置中，我们允许了除注释之外的所有类型的代码触发智能提示。对于字符串类型的代码，我们也开启了智能提示。
"editor.wordBasedSuggestions" 配置项用于关闭基于单词的智能提示。这可能会导致一些不必要的代码建议，从而降低了开发效率。
2.3 安装必要的依赖项
除了安装插件之外，我们还需要安装一些必要的依赖项。主要有以下几个：
ESLint
Prettier
typescript（可选）
安装这些依赖项的方式取决于您使用的包管理器（npm或yarn）。举个例子，如果您使用的是npm，可以在终端中运行以下命令来安装这些依赖项：
npm install eslint prettier typescript --save-dev
安装完依赖项之后，我们还需要创建一些配置文件。现在，我们来逐一了解这些配置文件的作用。
3. 配置文件详解
3.1 .eslintrc.json
ESLint用于代码检查，因此我们需要编写一个配置文件来告诉它如何检查代码。我们可以在项目根目录下创建一个名为 .eslintrc.json 的文件，在其中编写我们的配置。
以下是一个基本的ESLint配置：
{
"parser": "babel-eslint",
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended",
"prettier/@typescript-eslint",
"plugin:prettier/recommended"
],
"plugins": [
"@typescript-eslint",
"prettier"
],
"rules": {
"prettier/prettier": "error"
}
}
在上面的配置中，我们指定了使用Babel解析器进行代码解析。同时，我们还使用了一系列ESLint插件为我们提供更好的检查和智能提示。
3.2 .prettierrc.json
Prettier是一款优秀的代码格式化工具。配置Prettier很简单，我们只需要在项目根目录下创建一个名为.prettierrc.json的文件即可。
以下是一个基本的Prettier配置：
{
"printWidth": 80,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": true,
"trailingComma": "es5",
"bracketSpacing": true,
"arrowParens": "avoid"
}
在上面的配置中，我们指定了打印宽度、Tab宽度、使用Tab还是空格、JavaScript语句是否需要分号以及其他一些常用设置。
3.3 jsconfig.json或tsconfig.json
jsconfig.json用于JavaScript项目，tsconfig.json用于TypeScript项目。除了前缀名不同之外，它们的作用是相同的——指定项目根目录、编译选项、智能提示和其他一些VSCode功能所需的信息。
以下是一个基本的jsconfig.json配置：
{
"compilerOptions": {
"target": "ES6",
"module": "commonjs",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}
在上面的配置中，我们指定了目标JavaScript版本、模块类型、是否允许合成默认导入以及其他一些常用设置。
4. 总结
从上面的内容中，我们可以看到如何在VSCode中正确地开启智能提示功能。我们需要安装必要的插件、配置用户设置和创建一些必要的配置文件。这些工作可以让我们在开发中获得更好的体验和更高的效率。