配置VSCode中ESLint与Prettier实现代码自动检查与格式化:1. 安装ESLint、Prettier扩展及项目依赖;2. 创建.eslintrc.cjs和.prettierrc文件配置规则;3. 设置.vscode/settings.json启用保存时自动修复;4. 添加.eslintignore和.prettierignore忽略无关文件。

在现代前端和后端开发中,代码质量至关重要。VSCode 作为最受欢迎的编辑器之一,结合 ESLint、Prettier 等工具,可以实现代码的实时检测与自动修复。以下是配置一个高效、自动化代码检查工作流的完整步骤。
要实现代码检查和格式化,需先安装必要的 VSCode 扩展和项目依赖。
推荐安装以下扩展:在项目根目录初始化并安装依赖:
npm init -y npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier
若使用 TypeScript,还需添加:
npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin
创建 .eslintrc.cjs 文件定义代码检查规则:
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:prettier/recommended', // 启用 Prettier 并避免冲突
],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
},
plugins: ['@typescript-eslint'],
rules: {
'no-console': 'warn',
'no-unused-vars': 'error',
},
};创建 .prettierrc 文件定义格式化样式:
{
"semi": true,
"trailingComma": "es5",
"singleQuote": true,
"printWidth": 80,
"tabWidth": 2
}修改项目根目录下的 .vscode/settings.json,确保保存时自动修复问题:
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"files.autoSave": "onFocusChange"
}说明:
在项目根目录创建 .eslintignore 和 .prettierignore 文件,避免对生成文件或依赖进行检查:
node_modules dist build *.min.js coverage
这样可以提升性能,避免误报。
基本上就这些。完成上述配置后,你在编辑代码时就能看到实时错误提示,保存时自动修复格式和常见问题,大幅提升编码效率和项目一致性。
以上就是VSCode代码检查:配置实时检测与自动修复的完整工作流的详细内容,更多请关注php中文网其它相关文章!
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号