vscode---ESLint与Prettier配合解决代码格式问题

目录

1.创建项目时勾选ESLint

 2.配置.eslintrc.js（在项目根目录下）：

3.安装Prettier

 4.配置prettier

5.其他设置

---

1.创建项目时勾选ESLint

选择Standard。

 2.配置.eslintrc.js（在项目根目录下）：

添加'space-before-function-paren': 'off'是为了解决ESLint与Prettier的冲突

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    '@vue/standard'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'space-before-function-paren': 'off'
  }
}

3.安装Prettier

在vscode中搜索插件点击安装

 4.配置prettier

（1）在项目根目录下创建.prettierrc文件

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

（2）在vscode中按ctrl+shift+p输入setting.json，添加以下内容：

 // eslint配置项，保存时自动修复
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    // 默认使用prettier格式化支持的文件
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    // 自动设定eslint工作区
    "eslint.workingDirectories": [
        { "mode": "auto" }
    ]

5.其他设置

（1）点击vscode左下角设置，搜索format,然后勾选Format on save。

 

 （2）搜索tab size，将其值改为2。ok！这样便完成所有配置了，后面编码只要点击保存便会自动格式化代码，可使代码具有良好的规范。