vue vscode settings代码格式化配置

{
    //设置字体大小
    "editor.fontSize": 18,
    "editor.tabSize": 4,
    "editor.lineHeight": 30,
    "files.associations": {
        "*.vue": "vue",
        "*.js": "javascript"
    },
    "window.zoomLevel": 0, // 窗口大小比例
    "editor.detectIndentation": false, // vscode 默认是启用根据文件类型自动设置 tabSize 的值
     // 控制按下 TAB 键,是否展开 Emmet 缩写
    "emmet.triggerExpansionOnTab": true,
    "update.mode": "none",
    //是否在保存时应用eslint规则自动格式化后保存
    "editor.formatOnSave": true, // 在保存时自动格式化
    "editor.formatOnType": false, // 在键入一行后是否自动化格式
   // 是否显示eslint状态栏    
"eslint.alwaysShowStatus": true,
     // 使用eslint校验的语言
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue"
    ],
    "eslint.options": {
        "plugins": [
            "html"
        ]
    },
    //  #让prettier使用eslint的代码格式进行校验
    "prettier.eslintIntegration": true,
    "prettier.semi": false, //去掉代码结尾的分号
    "prettier.singleQuote": false, //使用单引号替代双引号
    // 设置 .vue 文件中,HTML代码的格式化插件
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    // #让vue中的js按"prettier"格式进行格式化
    "vetur.format.defaultFormatter.js": "prettier", //让vue中的js按编辑器自带的ts格式进行格式化
    // "vetur.format.defaultFormatter.js": "prettier-eslint",
    // vue中HTML和js配置内容
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            // 可选值有[auto, force, force-aligned, force-expand-multiline] 总有一款适合你
            "wrap_attributes": "force-expand-multiline",
            "semi": false, // 句尾添加分号 false为不需要分号
            "singleQuote": false // 单引号
        },
        "prettyhtml": {
        "printWidth": 100,
        "singleQuote": true,
        "wrapAttributes": true,
        "sortAttributes": true
      },
        "prettier": {
            // js格式可以自己配置
            "semi": false, // 句尾添加分号 false为不需要分号
            "singleQuote": true, // 使用单引号代替双引号
            "trailingComma": "none",
            "tabWidth": 4
            /*  prettier的配置 */
            // "prettier.printWidth": 100, // 超过最大值换行
            // "prettier.tabWidth": 4, // 缩进字节数
            // "prettier.useTabs": false, // 缩进不使用tab,使用空格
            // "prettier.semi": true, // 句尾添加分号
            // "prettier.singleQuote": true, // 使用单引号代替双引号
            // "prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器(如GitHub comment)而按照markdown文本样式进行折行
            // "prettier.arrowParens": "avoid", //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid:省略括号
            // "prettier.bracketSpacing": true, // 在对象,数组括号与文字之间加空格 "{ foo: bar }"
            // "prettier.disableLanguages": ["vue"], // 不格式化vue文件,vue文件的格式化单独设置
            // "prettier.endOfLine": "auto", // 结尾是 \n \r \n\r auto
            // "prettier.eslintIntegration": false, //不让prettier使用eslint的代码格式进行校验
            // "prettier.htmlWhitespaceSensitivity": "ignore",
            // "prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
            // "prettier.jsxBracketSameLine": false, // 在jsx中把'>' 是否单独放一行
            // "prettier.jsxSingleQuote": false, // 在jsx中使用单引号代替双引号
            // "prettier.parser": "babylon", // 格式化的解析器,默认是babylon
            // "prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier
            // "prettier.stylelintIntegration": false, //不让prettier使用stylelint的代码格式进行校验
            // "prettier.trailingComma": "es5", // 在对象或数组最后一个元素后面是否加逗号(在ES5中加尾逗号)
            // "prettier.tslintIntegration": false // 不让prettier使用tslint的代码格式进行校验
        }
    },
    "space-before-function-paren": 0,
    "powermode.enabled": true,
    //Vetur默认使用 eslint-plugin-vue来检测 <template>,关闭该检测
    "vetur.validation.template": true,
    // 配置 glob 模式,以排除指定格式的文件和文件夹。文件资源管理器根据此设置决定要显示或隐藏哪些文件和文件夹
    "files.exclude": {
      "**/.git": true,
      "**/.svn": true,
      "**/.hg": true,
      "**/CVS": true,
      "**/.DS_Store": true,
      "**/.vscode": true,
      "**/.idea": true
    },
    //配置可以格式化的文件
    "beautify.language": {
        "js": {
            "type": [
                "javascript",
                "json"
            ],
            "filename": [
                ".jshintrc",
                ".jsbeautify"
            ]
        },
        "css": [
            "css",
            "scss"
        ],
        "html": [
            "htm",
            "html",
            "vue"
        ]
    },
    // git配置
    "git.autofetch": true,
    // 每次保存的时候将代码按eslint格式进行修复
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }, //是否使用默认图片
    // 文件头部注释  按住ctrl+alt+i 自动顶部载入
    "fileheader.Author": "ll",
    "fileheader.LastModifiedBy": "ll",
    //自定义内容
    "fileheader.customMade": { 
      "Description": "", //文件内容描述
      "Version": "1.0.0", //版本
      "Author": "ll", //作者
      "Date": "Do not edit", //日期
      "LastEditors": "ll", // 最新编辑人
      "LastEditTime": "Do not Edit" // 最新编辑事件
    },
    //函数注释
    "fileheader.cursorMode": {
      "Description": "", //内容
      "Param": "", //参数
      "Return": "" //返回值
    },
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
    },
    "[css]": {
// 控制补全css代码时是否覆盖单词 replace:插入提示的补全单词并覆盖光标右侧的文本。
        "editor.suggest.insertMode": "replace"
    },
    "[jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
   // 是否启用字体连字
    "editor.fontLigatures": null,
    // 更改时自动保存文件更改
    // 控制自动保存。 onFocusChange: 当编辑器失去焦点时,将自动保存编辑器的内容。
    // 如果设置为off 则关闭自动保存文件功能
    "files.autoSave": "onFocusChange",
    // 设置保存文件之前等待的时间
    "files.autoSaveDelay": 5000,
    // 控制是否在搜索中跟踪符号链接
    "search.followSymlinks": false,
    // 控制是否在键入代码时自动显示建议
    "editor.parameterHints.enabled": true,
    //控制是否在键入时自动显示建议
    "editor.quickSuggestions": {
      "other": true, //在字符串和注释外启用快速建议
      "comments": true, //在注释内启用快速建议。
      "strings": true //在字符串内启用快速建议。
    },
    // 工作区主题设置
    "workbench.colorTheme": "Visual Studio Dark",
    "workbench.iconTheme": "vscode-icons",
    // "eslint.format.enable": true
}

  • 8
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值