只需一文带你深入在 Vue 项目中配置 ESLint 和 Prettier

# 安装ESLint和Prettier
npm install eslint prettier eslint-plugin-vue babel-eslint eslint-config-prettier --save-dev
 
# 创建.eslintrc.js配置文件
touch .eslintrc.js
 
# 在.eslintrc.js中添加以下配置
module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/essential',
    'eslint:recommended',
    'plugin:prettier/recommended',
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  },
  parserOptions: {
    parser: 'babel-eslint',
  },
};
 
# 创建.prettierrc配置文件
touch .prettierrc
 
# 在.prettierrc中添加以下配置
{
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 80,
  "tabWidth": 2,
  "semi": false,
  "vueIndentScriptAndStyle": true
}
 
# 在package.json中添加lint脚本
"scripts": {
  "lint": "eslint --ext .js,.vue src"
}

以上命令和配置将ESLint和Prettier集成到Vue项目中。通过运行npm run lint可以对项目中的src目录下的所有.js和.vue文件进行代码质量检查。