vscode开发vue项目自动整理代码

缺乏、安全感 2023-07-25 09:48 16阅读 0赞

安装必要的插件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 1][]

配置文件

{
      "window.zoomLevel": 0,
      "px-to-rem.px-per-rem": 100,
      "workbench.editor.enablePreview": false, //打开文件不覆盖
      "search.followSymlinks": false, //关闭快速预览
      "files.autoSave": "afterDelay", //打开自动保存
      "editor.lineNumbers": "on", //开启行数提示
      "editor.quickSuggestions": {
        //开启自动显示建议
        "other": true,
        "comments": true,
        "strings": true
      },
      "editor.tabSize": 2, //制表符符号eslint
      "editor.formatOnSave": true, //让prettier使用eslint的代码格式进行校验
      "prettier.semi": false, //去掉代码结尾的分号
      "prettier.singleQuote": false, //使用单引号替代双引号
      "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后面的括号之间加个空格
      "vetur.validation.template": false, //关闭vetur对template的检测
      "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
      "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
      "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
          "wrap_attributes": "force-aligned" //属性强制折行对齐force-aligned 自动auto
        }
      },
      "eslint.validate": [
        //开启对.vue文件中错误的检查
        "javascript",
        "javascriptreact",
        {
          "language": "html",
          "autoFix": true
        },
        {
          "language": "vue",
          "autoFix": true
        }
      ],
      "javascript.updateImportsOnFileMove.enabled": "never",
      "git.enableSmartCommit": true,
      "eslint.autoFixOnSave": true,
      "git.autofetch": true,
      "[javascript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
      },
      "workbench.iconTheme": "Monokai Pro (Filter Machine) Icons",
      "workbench.colorTheme": "Monokai",
      "editor.minimap.enabled": false,
      "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
      }
    }

\-------------------------------------------------------------更新---------------------------------------------------------------------------------------------------

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 2][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 3][]

setting.json

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70]: /images/20230528/1d63c837cd5b449287a9019d7366ee4d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 1]: /images/20230528/22ec5511658c4af7a8db534b3b878687.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200422181819285.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 3]: /images/20230528/f3a703c8053a451095e585695ae74ca5.png