概要

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

npm install eslint --save-dev

安裝完后編寫配置規則

• 需要在項目的根目錄下新建一個eslint.config.js
• eslint.config.js 是 ESLint v9 及以上版本推薦使用的新格式配置文件 （推薦使用）

規則如下：

//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 版本高亮
• 是否啟用智能提示等

`.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文件中加上：

{"javascript.validate.enable": false, // 禁用內置 JS 驗證"typescript.validate.enable": true, // 禁用 TS 驗證
}

即可解決。