npm 包 vscode 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发领域，我们经常使用 Visual Studio Code 进行代码编辑和开发。而在这个编辑器中，许多方便的功能需要通过安装 npm 包来实现。本篇文章就是要详细介绍如何使用 npm 包在 vscode 中实现各种功能。

搜索 npm 包

在 vscode 中，安装 npm 包之前，我们需要先搜索需要的包。搜索的方式有两种：

在找到需要的 npm 包之后，就需要进行安装。在终端中，我们可以通过 npm install 命令来完成安装。例如：

npm install jquery --save

在 vscode 中，我们可以通过 Extensions（扩展）一栏中的 Install 按钮来完成安装。

npm 包安装完成之后，我们就可以在 vscode 中使用它们了。下面是一些常见的 npm 包的使用方法。

ESLint 是一个用来识别 ECMAScript/JavaScript 代码中常见问题的可配置的代码检查工具。在 vscode 中使用 ESLint，需要先安装 eslint 和 eslint-config-airbnb 两个 npm 包。

npm install eslint eslint-config-airbnb --save-dev

然后，在项目根目录下创建 .eslintrc 文件，配置如下：

{
  "extends": "airbnb-base"
}

在 vscode 中，按下 Ctrl + Shift + P 组合键，输入 ESLint: Enable ESLint，启用 ESLint。之后，代码中出现的错误、警告等问题就会在编辑器中显示出来。

Prettier 是一个代码格式化工具，可以帮助我们保持代码风格的一致性。在 vscode 中使用 Prettier，需要先安装 prettier 和 eslint-config-prettier 两个 npm 包。

npm install prettier eslint-config-prettier --save-dev

然后，在 .eslintrc 文件中添加如下配置：

{
  "extends": [
    "airbnb-base",
    "plugin:prettier/recommended"
  ]
}

再在 vscode 的设置中添加如下配置，即可在保存代码时自动进行格式化：

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

Stylelint 是一个行业领先的 CSS 和 SCSS 代码检查工具，在 vscode 中也有广泛的应用。在 vscode 中使用 Stylelint，需要先安装 stylelint 和 stylelint-config-standard 两个 npm 包。

npm install stylelint stylelint-config-standard --save-dev

然后，在项目根目录下创建 .stylelintrc 文件，配置如下：

{
  "extends": "stylelint-config-standard"
}

最后，在 vscode 中启用 Stylelint，即可在编辑器中看到 CSS 和 SCSS 代码的问题。

GitLens 是一个 VSCode 插件，可以为我们提供更高效、更直观的 Git 使用体验。在 vscode 中安装 GitLens，只需要在 Extensions（扩展）一栏搜索安装即可。

使用 GitLens，我们可以查看代码的 Git 历史、远程跟踪情况、作者信息、更改说明等，极大地提高了我们的协作效率。

本篇文章详细介绍了如何使用 npm 包在 vscode 中实现各种方便的功能，包括 ESLint、Prettier、Stylelint 和 GitLens。通过这些 npm 包的使用，我们可以更加高效和优雅地进行前端开发工作，提高代码质量和协作效率。

const fn = (a,b) => {console.log(a + b);}

按下 Ctrl + Shift + I 组合键，即可自动格式化成如下代码：

const fn = (a, b) => {
  console.log(a + b);
};

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/67102