返回

Vite项目的Eslint和Prettier自动化添加指南

前端

在Vite项目中添加Eslint和Prettier的步骤如下：

  1. 安装Eslint和Prettier
npm install --save-dev eslint prettier
  1. 初始化Eslint
npx eslint --init
  1. 初始化Prettier
npx prettier --write
  1. 在.eslintrc.json文件中添加Eslint配置
{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ],
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": [
    "prettier"
  ],
  "rules": {
    "prettier/prettier": ["error", {"endOfLine": "auto"}]
  }
}
  1. 在.prettierrc.json文件中添加Prettier配置
{
  "singleQuote": true,
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "bracketSpacing": true
}
  1. 在package.json文件中添加scripts
{
  "scripts": {
    "lint": "eslint --ext .js,.vue src",
    "format": "prettier --write src"
  }
}
  1. 运行lint和format命令
npm run lint
npm run format

如何使用Eslint和Prettier进行代码检查和代码风格修复

  1. 使用Eslint进行代码检查
npm run lint
  1. 使用Prettier进行代码风格修复
npm run format

建议

  • 使用Eslint和Prettier时，建议使用编辑器的插件来帮助您自动修复代码风格问题。
  • 在提交代码之前，建议先运行Eslint和Prettier来检查代码是否符合规范。
  • 建议定期更新Eslint和Prettier的版本，以确保使用最新的功能和修复。

结语

通过在Vite项目中添加Eslint和Prettier，可以帮助我们提高代码质量，并使代码风格更加统一。同时，Eslint和Prettier还提供了许多有用的功能，帮助我们更有效地进行代码开发。希望本文能够帮助您在Vite项目中成功添加Eslint和Prettier。