node.js在vscode的配置

文章目录

    • 概要
    • [1. 使用和webstrom一样的快捷键](#1. 使用和webstrom一样的快捷键)
    • [2. 让vscode的主题变成webstrom](#2. 让vscode的主题变成webstrom)
    • [3. 如何在 Node.js 环境下写代码](#3. 如何在 Node.js 环境下写代码)
      • [3.1 使用 ESLint配置规则](#3.1 使用 ESLint配置规则)
      • [3.2 配置.vscode/settings.json](#3.2 配置.vscode/settings.json)
    • [4. Prettier安装](#4. Prettier安装)
    • [5. 其它问题解决](#5. 其它问题解决)

概要

node.js在webstrom编辑器中可以完美使用代码提示、错误提示等功能,但是在vscode中编辑node.js有一堆问题,为了使vscode有和nodejs一样的功能,我尝试了各种配置,现分享出来。

1. 使用和webstrom一样的快捷键

对于熟悉JetBrains产品的coder来说,当你切换到vscode工具时,会发现快捷及其难用,就算我记住了,长时间不用vscode又会忘记该命令,实在受不了我就寻找一劳永逸的方案。

结果发现了vscode有款插件,可以直接让你在vscode使用JetBrains快捷键命令: IntelliJ IDEA Keybindings

2. 让vscode的主题变成webstrom

没啥好讲的,还是借助vscode插件: Webstorm IntelliJ Darcula Theme,上图:

3. 如何在 Node.js 环境下写代码

在vscode写node.js代码时,会出现没有错误提示的问题,所以写代码就是就很不爽,不能及时发现潜在bug,这个问题困扰我半天,经过一顿搜索发现解决方案:

3.1 使用 ESLint配置规则

  • 要检查哪些文件?
  • 使用什么 JavaScript 语法版本?
  • 哪些全局变量是合法的?
  • 开启/关闭哪些代码规范规则?

使用 ESLint配置规则需要先安装 ESLint

bash 复制代码
npm install eslint --save-dev

安装完后编写配置规则

  • 需要在项目的根目录下新建一个eslint.config.js
  • eslint.config.js 是 ESLint v9 及以上版本推荐使用的新格式配置文件 (推荐使用)

规则如下:

javascript 复制代码
//eslint.config.js文件
const eslintPlugin = require('@eslint/js');

module.exports = [
  eslintPlugin.configs.recommended,
  {
    files: ['**/*.js'],
    languageOptions: {
      ecmaVersion: 2017,
      sourceType: 'commonjs',
      globals: {
        require: 'readonly',
        module: 'readonly',
        __dirname: 'readonly',
        console: 'readonly', // 这里告诉 ESLint console 是已定义的全局变量
        process: 'readonly', // 允许使用 process 全局变量
      },
    },
    rules: {
      strict: 'off', // 关闭 strict 规则
      'no-undef': 'error',
      'no-unused-vars': 'error',
      eqeqeq: 'error',
      'no-console': 'off', // 关闭 no-console 规则,允许使用 console
      'no-debugger': 'error',
      'no-var': 'error',
      'prefer-const': 'error',
    },
    ignores: ['eslint.config.cjs'], // 忽略自己
  },
];

解释:

这个配置的作用是:

  • 检查所有 .js 文件的语法和风格
  • 使用 Node.js 环境(CommonJS、ES2017)
  • 强制使用现代 JavaScript 语法
  • 合理配置全局变量,避免误报
  • 提高代码规范性(比如禁用 var、禁止未使用变量)
  • 忽略自身配置文件,避免循环报错

3.2 配置.vscode/settings.json

这是 VS Code 编辑器的本地设置文件 ,用于控制编辑器的行为,比如:

  • 是否在保存时自动修复 ESLint 错误
  • 是否启用 ESLint 插件
  • 使用哪个 JavaScript/TypeScript 版本高亮
  • 是否启用智能提示等
json 复制代码
`.vscode/settings.json文件`
{
  "javascript.validate.enable": false, // 禁用内置 JS 验证
  "typescript.validate.enable": true, // 禁用 TS 验证
  "editor.showUnused": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "prettier.singleQuote": true,
  "prettier.trailingComma": "all",
  "prettier.printWidth": 120,

  // ✅ 启用 ESLint 插件对 JS 文件检查
  "eslint.validate": ["javascript"],

  // ✅ 启用 ESLint 自动修复
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },

  // ✅ 自动识别项目根目录
  "eslint.workingDirectories": [{ "mode": "auto" }],

  // ✅ 强制插件使用项目本地 ESLint(9.x)
  "eslint.useESLintClass": true,

  // 显示标尺(刻度线)
  "editor.rulers": [80, 120]
}

这段配置让 VS Code 更加适合使用 ESLint + Prettier 的开发环境,能实现:

  • 保存时自动格式化和修复
  • 使用项目自己的 ESLint(而不是全局的)
  • 高亮未使用变量
  • 配置 Prettier 的代码风格

4. Prettier安装

自动格式化代码插件:Prettier - Code formatter

5. 其它问题解决


在.vscode/settings.json文件中加上:

json 复制代码
{
  "javascript.validate.enable": false, // 禁用内置 JS 验证
  "typescript.validate.enable": true, // 禁用 TS 验证
}

即可解决。

相关推荐
电子小子洋酱1 分钟前
VScode SSH远程连接Ubuntu(通过SSH密钥对的方式)
vscode·物联网·ubuntu·ssh
DogDaoDao2 小时前
Windows下VScode配置FFmpeg开发环境保姆级教程
windows·vscode·ffmpeg·音视频·gcc
Hy行者勇哥2 小时前
在 JetBrains 系列 IDE(如 IntelliJ IDEA、PyCharm 等)中如何新建一个 PlantUML 文件
ide·pycharm·intellij-idea
pk_xz1234562 小时前
在Intel Mac的PyCharm中设置‘add bin folder to the path‘的解决方案
ide·人工智能·科技·算法·macos·pycharm·机器人
GDAL2 小时前
Node.js 聊天内容加密解密实战教程(含缓存密钥优化)
缓存·node.js
aningxiaoxixi3 小时前
vscode 中的 mermaid
网络·ide·vscode
旷世奇才李先生4 小时前
Eclipse 安装使用教程
java·ide·eclipse
原则猫4 小时前
jscodeshift 工程运用
前端·node.js
不简说4 小时前
Nodejs AI SDK盘点
javascript·node.js·openai
百锦再5 小时前
Rider 全面解析:跨平台 .NET IDE 的核心技术与高效实践指南
linux·ide·.net·sdk·core·rider