vue项目使用eslint和prettier格式化项目

vue项目使用eslint和prettier格式化项目_第1张图片
vue项目使用eslint和prettier格式化项目_第2张图片

开启保存自动格式化

vue项目使用eslint和prettier格式化项目_第3张图片
vue项目使用eslint和prettier格式化项目_第4张图片

.eslintrc.js

// ESLint 配置文件遵循 commonJS 的导出规则,所导出的对象就是 ESLint 的配置对象
// 文档:https://eslint.bootcss.com/docs/user-guide/configuring
module.exports = {
  // 表示当前目录即为根目录,ESlint 规则将被限制到该目录下
  root: true,
  // env 表示启用 ESLint 检测的环境
  env: {
    // 在 node 环境下启动 ESLint 检测
    node: true
  },
  // ESLint 中基础配置需要继承的配置
  extends: ['plugin:vue/vue3-essential', '@vue/standard'],
  // 解析器
  parserOptions: {
    parser: '@babel/eslint-parser'
  },
  // 需要修改的启用规则及其各自的错误级别
  /**
   * 错误级别分为三种:
   * "off"  或 0  - 关闭规则
   * "warn" 或 1  - 开启规则,使用警告级别的错误:warn(不会导致程序退出)
   * "error"  或 2 - 开启规则,使用错误级别的错误:error(当被触发的时候,程序会退出)
   */
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'space-before-function-paren': 'off' // 函数名后关闭空格和prettier格式化会冲突 prettier没有对应的配置
  }
}

.prettierrc

{
  "semi": false, 
  "singleQuote": true,
  "trailingComma": "none"
}

你可能感兴趣的:(前端项目,vue.js,javascript,前端,eslint,prettier)