Eslint与Prettier配合解决代码格式问题

1.vscode插件市场搜索 Prettier 点击安装
2.项目根目录创建 .prettierrc 文件
写入如下配置

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none"
}
1
2
3
4
5

3.找到vscode 设置
输入框中输入 save
勾选 Editor: Format On Save

4.修改空格
vscode 而言，默认一个tab等于 4个空格，而eslint希望一个tab两个空格
打开 vscode 设置
找到 Editor:Tab Size 值改为2

5. 如何使用了多个插件格式化文档
   右键 使用xx格式化文档， 选择prettier

6 prettier 和 eslint 之间存在一些冲突 例如 报错 space-before-function-paren
在 .eslintrc.js 中rules 加入

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19