eslint+prettier配置

需要安装eslint和prettier，这两个插件

创建一个vue3项目

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

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

创建.eslintrc.js

module.exports = {
    root: true,
    env: {
      node: true
    },
    extends: [
      'plugin:vue/vue3-essential',
      'eslint:recommended',
      '@vue/prettier'
    ],
    parserOptions: {
      parser: 'babel-eslint'
    },
    rules: {
      'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
      'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
      'prettier/prettier': [
        'error',
        {
          singleQuote: true,
          semi: false,
          useTabs: false,
          tabWidth: 2,
          trailingComma: 'none',
          printWidth: 80,
          bracketSpacing: true,
          arrowParens: 'avoid',
          endOfLine: 'auto'
        }
      ]
    }
  }

module.exports = {
    root: true,
    env: {
      node: true
    },
    extends: [
      'plugin:vue/vue3-essential',
      'eslint:recommended',
      '@vue/prettier'
    ],
    parserOptions: {
      parser: 'babel-eslint'
    },
    rules: {
      'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
      'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
      'prettier/prettier': [
        'error',
        {
          singleQuote: true,
          semi: false,
          useTabs: false,
          tabWidth: 2,
          trailingComma: 'none',
          printWidth: 80,
          bracketSpacing: true,
          arrowParens: 'avoid',
          endOfLine: 'auto'
        }
      ]
    }
  }

创建.prettierrc文件

{
    "singleQuote": true,
    "semi": false,
    "useTabs": false,
    "tabWidth": 2,
    "trailingComma": "none",
    "printWidth": 80,
    "bracketSpacing": true,
    "arrowParens": "avoid",
    "endOfLine": "auto"
}

{
    "singleQuote": true,
    "semi": false,
    "useTabs": false,
    "tabWidth": 2,
    "trailingComma": "none",
    "printWidth": 80,
    "bracketSpacing": true,
    "arrowParens": "avoid",
    "endOfLine": "auto"
}

在项目根目录下创建一个名为 .vscode/settings.json 的文件

json

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.formatOnSave": true,
  "prettier.requireConfig": true
}

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.formatOnSave": true,
  "prettier.requireConfig": true
}

在 package.json 文件中添加以下内容：

json

"scripts": {
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "lint-fix": "eslint --fix --ext .js,.vue --ignore-path .gitignore ."
  },

"scripts": {
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "lint-fix": "eslint --fix --ext .js,.vue --ignore-path .gitignore ."
  },

创建.eslintignore文件

node_modules/
/.git/
/dist/

node_modules/
/.git/
/dist/

eslint+prettier配置 ​

eslint+prettier配置