Vue 配置 eslint 格式化项目全部历史代码

1、安装 eslint

 $ yarn add eslint
  // or  
 $ npm install eslint

2、项目根目录下的 package.json 里添加 scripts 配置

    "scripts": {
        "lint": "eslint --ext .js,.vue src",
    },

3、项目目录西下添加 eslint 配置文件 .eslintrc.js 和 .eslintignore

具体模板文件内容在最下边，可以在 .eslintrc.js 中配置具体的代码格式化风格。

4、运行 yarn lint

$ yarn lint
// or 
$ npm run lint

1、可能会报如下错误

解决方法：安装 eslint-plugin-vue 插件

$ yarn add  eslint-plugin-vue
// or
$ npm install eslint-plugin-vue

.eslintrc.js 中添加如下配置

 parser: 'vue-eslint-parser',

 

2、接着运行 yarn lint 如果还报错

解决方法：.eslintrc.js 中添加如下配置

    parserOptions: {
        ecmaVersion: 6,
        sourceType: 'module',
    },

5、接着运行 yarn lint

会输出具体的错误信息

 

6、修复，格式化整个项目 src目录下的代码

$ yarn lint --fix
// or 修复单个文件
$ yarn lint src/App.vue --fix

大功告成。

 

其他问题

1、template 和 style 没有被格式化的问题

添加 相关插件，按需添加各种插件

$ yarn add -D prettier@2.0.5
$ yarn add -D @vue/eslint-config-prettier@6.0.0  
$ yarn add -D eslint-plugin-prettier@3.1.3   
$ yarn add -D eslint-plugin-vue@6.2.2

.eslintrc.js 中添加相应的配置，按需添加其他配置

extends: ['eslint:recommended', '@vue/prettier'],

 

可以按需配置其他插件。

 配置文件：

.eslintignore

.eslintrc.js