vscode最简代码格式化配置

5,306 阅读2分钟

目的

统一团队代码风格,防止协作中不必要的冲突,团队主要技术栈VUE。

编辑器:vscode

插件:VeturPrettierkoroFileHeader(添加文件头部注释和方法注释)

配置文件位置

vscode英文版菜单:File / Preferences / Settings,再点击右上角的 Open Settings(JSON)

vscode中文版菜单:文件 / 首选项 / 设置,再点击右上角的打开设置(json)

配置文件(Vetur、Prettier、koroFileHeader)

首先安装插件VeturPrettierkoroFileHeader

然后,在配置文件中添加如下设置,这是最简配置,其他的默认即可。

配置说明

一. vetur 用于语法高亮

二. prettier 用于格式化,js、html、css统一使用prettier

三. 个性化细节

1) 4 格缩进
2) 超出160个字符换行
3) 去除语句末尾分号
4) js、css中一律使用单引号

如下:

// 每次保存的时候自动格式化
"editor.formatOnSave": true,

// 文件头部作者信息注释
"fileheader.customMade": {
    "Author": "QiTianDaSheng",
    "Date": "Do not edit",
    "Descripttion": "",
    "LastEditors": "QiTianDaSheng",
    "LastEditTime": "Do not Edit"
},

// script 中使用prettier规则
"vetur.format.defaultFormatter.js": "prettier",
// template 中使用js-beautify-html规则
"vetur.format.defaultFormatter.html": "js-beautify-html",
// style less模块中使用prettier规则
"vetur.format.defaultFormatter.less": "prettier",
"vetur.format.options.tabSize": 4,
"vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
        "wrap_line_length": 160,
        "wrap_attributes": "auto"
    },
    // js中使用的规则
    "prettier": {
        // 4空格缩进
        "tabWidth": 4,
        // 语句末尾去掉分号
        "semi": false,
        // 双引号变成单引号
        "singleQuote": true,
        "printWidth": 160,
    }
},

// 针对JS文件,使用prettier
"prettier.tabWidth": 4,
"prettier.semi": false,
"prettier.singleQuote": true,
"prettier.printWidth": 160,

koroFileHeader

// 文件头部作者信息注释
"fileheader.customMade": { 
    "Author": "QiTianDaSheng",
    "Date": "Do not edit",
    "Descripttion": "",
    "LastEditors": "QiTianDaSheng",
    "LastEditTime": "Do not Edit"
}
  1. 文件头部注释会自动生成。
  2. 函数注释,使用快捷键windowctrl+alt+t,macctrl+cmd+t,即可生成。

注意事项

  1. 如果有多个格式化插件,可以右键选择默认格式化方式为Vetur或者Prettier

  2. 项目根目录下这些个性化设置会覆盖编辑器的配置。

    .vscode/settings.json

    .editorconfig

    .prettierrc(如果安装了prettier插件)

浙江大华技术股份有限公司-软研-智慧城市产品研发部招聘高级前端,欢迎来撩,有意向可发送简历到chen_zhen@dahuatech.com,长期有效