eslint+prettier 统一代码风格_eslint 格式化 同组件多属性不换行

1.实现效果

Eslint校验代码语法，prettier统一格式化代码，按下保存自动修复eslint错误，自动格式化代码。

2.安装vscode插件

• Vetur
• ESLint
• Prettier - Code formatter

3.配置vscode设置

文件–首选项–设置，打开json模式，添加以下配置：

{
  // 控制工作台中活动栏的可见性。
  "workbench.activityBar.visible": true,
  //主题设置
  "workbench.colorTheme": "Monokai",
  // 默认编辑器字号
  "editor.fontSize": 14,
  //是否自动换行
  "editor.wordWrap": "on",
  "workbench.editor.enablePreview": false, //打开文件不覆盖
  "search.followSymlinks": false, //关闭rg.exe进程
  "editor.minimap.enabled": false, //关闭迷你图快速预览
  "files.autoSave": "onWindowChange", // 切换窗口时自动保存。
  "editor.lineNumbers": "on", //开启行数提示
  "editor.quickSuggestions": {
    //开启自动显示建议
    "other": true,
    "comments": true,
    "strings": true
  },
  "editor.tabSize": 2, //制表符符号eslint

  //.vue文件template格式化支持，并使用js-beautify-html插件
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  //js-beautify-html格式化配置，属性强制换行
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned"
    }
  },
  //根据文件后缀名定义vue文件类型
  "files.associations": {
    "*.vue": "vue"
  },
  //配置 ESLint 检查的文件类型
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  //保存时eslint自动修复错误
  "eslint.autoFixOnSave": true,
  //保存自动格式化
  "editor.formatOnSave": true
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

4.配置.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ['plugin:vue/essential', 'eslint:recommended'],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    //强制使用单引号
    quotes: ['error', 'single'],
    //强制不使用分号结尾
    semi: ['error', 'never']
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
}

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

5.配置.prettierrc

{
  "eslintIntegration": true, 
  "singleQuote": true,
  "semi": false
}

1
2
3
4
5
6