VSCode 中代码自动格式化

Posted on | Edited on | In

现在的项目经常用到 eslint 来控制代码质量和代码格式, 虽然好用但编写 eslint 格式的代码太痛苦
所以今天来讲讲如何在 VSCode 中开启 Vue 自动代码格式化

1
2
3
4
5
6
7
# 先安装几个 nodejs 库

# eslint
npm i -g eslint

# prettier
npm i -g prettier

然后在 VSCode 中做用户设置, 按下 cmd + ,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
  "editor.tabSize": 2,  
  "editor.formatOnSave": true, 
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "eslint.autoFixOnSave": true, 
  "vetur.format.defaultFormatter.html": "js-beautify-html"
}

在你的项目里配置一个.prettierrc 文件

1
2
3
4
5
6
7
8
9
{
  "eslintIntegration": true,
  "tabWidth": 2,
  "useTabs": false,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none",
  "arrowParens": "arrowParens"
}

项目里配置一个 .editerconfig

1
2
3
4
5
6
7
8
9
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

你会发现在 VSCode 中保存 Vue 文件时可以自动格式化了,

自动格式化