使用vueCli4.0配置eslint+prettier

众所周知eslint只是个语法检查工具，要想做到真正的自动修改语法错误，还要考prettier。下面介绍两种方式，可以在VScode工具里使用。首先，所有的前提是你的vscode已经安装了prettier插件，而且我建议你开启保存时自动调整代码，文章最后附上。

下面步骤用图片代替：
在这里插入图片描述

然后接下来的步骤两个可选项：

第一个

在这里插入图片描述

第二个

在这里插入图片描述

好了，现在使用vuecli4.0生成的vue就成功了。
直接用VScode打开项目，然后在主目录添加这样这个文件：prettier.config.js。

文件的内容主要如下：

module.exports = {
  printWidth: 80,
  tabWidth: 2,
  useTabs: false,
  semi: false, // 末尾不加尾号
  singleQuote: true, // 默认单引号
  quoteProps: 'as-needed',
  jsxSingleQuote: false,
  trailingComma: 'none', // es5对象属性最后加逗号。none不加
  bracketSpacing: true,
  jsxBracketSameLine: false,
  arrowParens: 'always',
  htmlWhitespaceSensitivity: 'ignore',
  vueIndentScriptAndStyle: false, // script、style标签不缩进
  endOfLine: 'lf',
}

当然这样还没行，在.eslintrc.js文件要多一个规则：
在这里插入图片描述
这里是代码：

    'space-before-function-paren': 'off'

至此，项目就配置完成了。运行npm run serve可以项目正常运行。

补充

如何在VScode开启prettier保存时运行呢？下面是步骤：
打开设置->搜索save
在这里插入图片描述

提醒

如果项目实际开发过程中有哪些eslint的报错，直接在文件中关闭即可。如果有问题可以在下面提问，一般的问题博主大概可能应该可以回答。