vscode java格式化有问题 vscode格式化js

一、安装以下三个扩展程序

1.ESLint

● javascript代码检语法测工具，可以配置每次保存时格式化js

● 每次保存时只格式化部分代码，需要连续按住Ctrl+S多次才能格式化完成

2.Prettier - Code formatter

● 只关注格式化，并不具有eslint检查语法等能力，

● 支持JavaScript · Flow · TypeScript · CSS · SCSS · Less · JSX · Vue · GraphQL · JSON · Markdown

3.Vetur

● 支持格式化html、标准css、标准js、vue文件

二、配置setting.json

1.打开setting.json文件

2.编辑setting.json文件

{
	"editor.formatOnType": true, //编辑时是否自动格式化
    "editor.formatOnSave": true, //保存时是否自动格式化
    "editor.formatOnPaste": true, //粘贴时是否自动格式化
    "editor.wordWrapColumn": 500, //视图每行最大字符数
    "editor.wordWrap": "wordWrapColumn", //视图自动换行控制(视觉上折行，不增加代码行数)，超出wordWrapColumn设置的值折行
    "editor.renderIndentGuides": false, //编写代码时是否给出对齐连线
    //"editor.codeActionsOnSave": { 
    //    "source.fixAll.eslint": true // 代码保存时按照eslint规则修复
    //},
    "editor.tabSize": 2, // tab默认两个空格
    "prettier.semi": true, //是否添加结束分号
    "prettier.singleQuote": true, //是否使用单引号
    "prettier.trailingComma": "none", // 是否在末尾自动添加逗号
    "prettier.tabWidth": 4, //tab缩进为4个空格字符
    "prettier.printWidth": 500, //代码每行最大字符数，超出换行(会增加行数)
    "vetur.format.options.tabSize": 4, //tab缩进为4个空格
    "vetur.format.defaultFormatter.html": "js-beautify-html", //html格式化规则(解决属性换行问题)
    "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化(解决属性换行问题)
    "vetur.format.defaultFormatter.ts": "vscode-typescript", //让vue中的ts按编辑器自带的ts格式进行格式化(解决属性换行问题) 
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": { //vue文件html相关
            "wrap_attributes": "aligned-multiple" //以下为取值说明
            // - auto: 仅在超出行长度时才对属性进行换行。
            // - force: 对除第一个属性外的其他每个属性进行换行。
            // - force-aligned: 对除第一个属性外的其他每个属性进行换行，并保持对齐。
            // - force-expand-multiline: 对每个属性进行换行。
            // - aligned-multiple: 当超出折行长度时，将属性进行垂直对齐。
        },
        "prettyhtml": { //vue文件html相关
            "printWidth": 500, //每行最大字符数，超出换行(会增加行数)
            "singleQuote": false, //是否使用单引号
            "wrapAttributes": false, //属性换行
            "sortAttributes": false  //属性排序
        },
        "prettier": { //vue文件js相关
            "semi": true, //是否添加结束分号
            "singleQuote": true //是否使用单引号
        }
    },
    
    "vetur.validation.template": false, //是否检测模板中的语法
}

或

{
  "editor.formatOnSave": true, // 每次保存自动格式化
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true // 每次保存的时候将代码按eslint格式进行修复
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode" // vue文件默认格式化方式
  },
  // vetur格式化配置
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.options.tabSize": 2,
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "auto"
    }
  },
  "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 函数前加上空格 只有在默认vetur的时候生效
  // js文件默认格式化方式 和vue中的js保持一致使用编辑器自带的ts格式
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode" // js文件默认格式化方式prettier
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode" // json文件默认格式化方式prettier
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"  // css文件默认格式化方式prettier
  },
  
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode" // typescript文件默认格式化方式prettier
  },
  "editor.fontSize": 16, // 字体大小
  "editor.wordWrap": "on", // 控制折行方式 - "on" (根据视区宽度折行)
  "editor.tabSize": 2, // 换行默认以tab缩进 2个字符
  "editor.colorDecorators": false, // 控制编辑器是否显示内联颜色修饰器和颜色选取器。
  "editor.snippetSuggestions": "top", // 将建议的代码段优先级提前选择，比如输入for第一个提示是for循环代码段。
  "files.associations": {
    // 文件关联语言的优先级配置
    "*.js": "javascriptreact",
    "*.vue": "vue",
    "*.cshtml": "html",
    "*.dwt": "html"
  },
  "window.zoomLevel": -1,
  "files.autoSave": "onFocusChange",
  "editor.formatOnPaste": true
}

如果prettier默认格式化规则不符合要求，在项目根目录创建.prettierrc.json文件覆盖默认格式化规则

.prettierrc.json

{
  "singleQuote": true,
  "semi": true,
  "trailingComma": "all", // 数组、对象属性最后加逗号
  "arrowParens": "always" // 箭头函数参数总是用括号包起来
}

三、eslint语法检测