2023-06-02 vscode vue+es6语法编辑自动格式化保存

2023-06-28 vscode vue+es6语法编辑自动格式化保存

1. 实现：在编写完vue组件或者js代码ctrl+s自动保存后，代码格式按照es6语法自动整理格式。

2. 实现步骤：

   1. 在vscode中安装：vuter、JavaScript (ES6) code snippets、ESLint这三个插件

   2. vscode中点击左侧导航中的拓展找到‘’vuter‘’，点击‘’vuter‘’进入扩展详情页面，点击其扩展详情下的齿轮按钮，选择‘’扩展设置‘’进行点击，最后点击‘’在setting.json中编辑‘’（或者点击文件->首选项->配置文件(默认)->显示，然后找到setting.json）

   3. 删除setting.json其中默认的内容，添加如下内容：

      {
          "workbench.iconTheme": "material-icon-theme",
          "workbench.colorTheme": "Material Theme Palenight",
          "editor.fontSize": 18,
          "editor.formatOnSave": true,
          "editor.formatOnPaste": true,
          "editor.tabSize": 2,
          "editor.codeActionsOnSave": {
              "source.fixAll.eslint": true
          },
          "editor.defaultFormatter": "octref.vetur",
          "vetur.format.defaultFormatterOptions": {
              "js-beautify-html": {
                  "wrap_attributes": "force-expand-multiline",
                  "wrap_line_length": 250, //换行长度
                  "end_with_newline": false
              },
              "prettyhtml": {
                  "printWidth": 100, // No line exceeds 100 characters
                  "singleQuote": false // Prefer double quotes over single quotes
              },
              "prettier": {
                  "semi": false,
                  "singleQuote": true,
              }
          },
          "vetur.format.defaultFormatter.js": "vscode-typescript", // js 使用 typescript
          "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
      }
      
      

   4. 保存，然后重新启动vscode