2020版vscode使用eslint+prettier进行代码统一

查了网上的教程有点旧，感觉每个贴都一样的，解决不了用Vue Cli中eslint代码检查。

一、配置eslint+prettier

1. 使用node安装eslint和prettier

npm install eslint -g //g代表本地全局依赖 D代表开发依赖 S代表运行时的依赖
npm install prettier -g

2. 在vscode插件安装eslint和prettier
   
   

二、配置prettierc插件有两种配置方法

1.在项目的根目录下创建.prettierrc文件（局部的只对本项目有效）
具体prettier配置参数可以参考下下面这个参数
点击参考prittier参数

{
  //需要更多规则可自行参考上面的链接
  "semi": false,  //句尾添加分号
  "singleQuote": true, //将双引号转为单引号
  "trailingComma": "none" //在对象或数组最后一个元素后面不添加逗号
}

2.在vscode settings.json文件中设置（全局的都每个项目都采用该配置）
settings.json文件，Mac用户可以按快捷键command+shift+p，window用户好像是alt+shift+p调用出搜索框输入settings.json文件即可
{
上面是你原有的配置信息,
“prettier.semi”: true, // 句尾添加分号
“prettier.singleQuote”: true, // 使用单引号代替双引号
“prettier.trailingComma”: none //在对象或数组最后一个元素后面是否
}

三、配置自动保存文件就对代码进行格式检查修复

需要保存文件就对代码进行eslint格式检查及修复的可以在settings.json文件中添加以下代码
{
上面是你原有的配置信息,
“editor.formatOnSave”: true, //保存就对代码进行格式转换
“editor.codeActionsOnSave”: { //按下保存就对格式进行检查是否符合eslint风格
“source.fixAll.eslint”: true
}
}

四、eslint配置文件.eslintrc.js文件配置

取消对函数括号内检查function a(),指的是当()里面没内容时eslint会提示报错
.eslintrc.js文件里的内容

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ['plugin:vue/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': 0  //在你的配置文件加上这句
  }
}