vsCode实现eslint,Prettier格式化（next.js框架）

为了在VSCode中实现ESLint和Prettier的格式化，你需要进行以下步骤：

1. 安装必要的扩展：

   • ESLint扩展
   • Prettier扩展

2. 安装相关的依赖包：

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

3. 在项目根目录下创建.eslintrc.js配置文件，并添加以下内容：

   
   
   
   module.exports = {
     extends: [
       'eslint:recommended',
       'plugin:react/recommended',
       'plugin:prettier/recommended' // 确保放在最后
     ],
     rules: {
       // 你可以在这里覆盖或添加规则
     }
   };

4. 创建.prettierrc配置文件，并添加你想要的格式化规则：

   
   
   
   {
     "singleQuote": true,
     "trailingComma": "es5",
     "printWidth": 80,
     "tabWidth": 2,
     "semi": true,
     "useTabs": false
   }

5. 在package.json中添加脚本以运行ESLint和Prettier：

   
   
   
   "scripts": {
     "lint": "eslint --ext .js,.jsx,.ts,.tsx .",
     "format": "prettier --write ."
   }

6. 在VSCode设置中添加以下配置以启用保存时格式化：

   
   
   
   "[javascript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[jsonc]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
   }

这样配置后，每次保存.js、.jsx、.ts、.tsx文件时，VSCode将自动运行ESLint检查代码质量并修复可自动修复的问题，保存后将自动应用Prettier规则格式化代码。