vsCode中,vue项目使用eslint自动格式化详细步骤

叁歲伎倆 2023-01-20 10:00 602阅读 0赞

一：在应用商店中搜索安装编辑器插件

Prettier - Code formatter
    Eslint

二、在package.json文件中配置以下依赖版本，并重新下载依赖（主要是eslint和prettier相关）

"devDependencies": {
        "@typescript-eslint/eslint-plugin": "^2.33.0",
        "@typescript-eslint/parser": "^2.33.0",
        "@vue/cli-plugin-babel": "~4.5.0",
        "@vue/cli-plugin-eslint": "~4.5.0",
        "@vue/cli-plugin-router": "~4.5.0",
        "@vue/cli-plugin-typescript": "~4.5.0",
        "@vue/cli-plugin-vuex": "~4.5.0",
        "@vue/cli-service": "~4.5.0",
        "@vue/compiler-sfc": "^3.0.0",
        "@vue/eslint-config-typescript": "^5.0.2",
        "eslint": "^6.7.2",
        "eslint-plugin-vue": "^7.0.0-0",
        "node-sass": "^4.12.0",
        "sass-loader": "^8.0.2",
        "typescript": "~3.9.3",
        "@vue/eslint-config-prettier": "^6.0.0",
        "prettier": "^2.2.1",
        "eslint-plugin-prettier": "^3.3.1"
      }

三、在根目录，手动添加.eslintrc.js文件

module.exports = {
        root: true,
        env: {
          node: true,
        },
        extends: [
          "plugin:vue/vue3-essential",
          "eslint:recommended",
          "@vue/typescript/recommended",
          "@vue/prettier",
          "@vue/prettier/@typescript-eslint",
        ],
        parserOptions: {
          ecmaVersion: 2020,
        },
        rules: {
          "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
          "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
        },
      };

四、设置编辑器的setting.json(文件→首选项→设置→右上角有一个json文件图标)

{
         // 保存时候使用eslint自动修复
        "editor.codeActionsOnSave": {
          "source.fixAll.eslint": true,
        },
        // 換行
        "editor.wordWrap": "on",
        // 代码缩进修改成2个空格
        "editor.tabSize": 2,
        // 不檢查縮進，保存后統一按設置項來設置
        "editor.detectIndentation": false,
        //保存的时候自动格式化
        "editor.formatOnSave": true,
        // 字體大小
        "editor.fontSize": 16,
        // 設置行高
        "editor.lineHeight": 24,
    
        // 左側工具欄是否可見
        "workbench.activityBar.visible": true,
    
        // 控制何时自动保存已更新文件。
        // 接受值有: "off"、"afterDelay"、"onFocusChange" (编辑器失去焦点)、"onWindowChange" (窗口失去焦点)。如果设置为 "afterDelay"，可在 "files.autoSaveDelay" 中配置延迟时间。
        "files.autoSave": "onWindowChange",
        // "files.autoSaveDelay": 3000,
    
        // 让prettier使用eslint的代码格式进行校验
        "prettier.eslintIntegration": true,
        // 去掉代码结尾的分号
        "prettier.semi": true,
        // 使用带引号替代双引号
        "prettier.singleQuote": true,
    
        // 启用后，按下 TAB 键，将展开 Emmet 缩写。
        "emmet.triggerExpansionOnTab": true,
    
        // js設置單引號
        "javascript.preferences.quoteStyle": "single",
        // 让函数(名)和后面的括号之间加个空格
        "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
        // html格式化
        "vetur.format.defaultFormatter.html": "js-beautify-html",
    
    
        //自动保存信息
        // By default, create file  username
        "fileheader.Author": "you name",
        // By default, update file  username.
        "fileheader.LastModifiedBy": "you name",
        // By default, common template. Do not modify it!!!!!
        "fileheader.tpl": "/*\r\n * @Author: {author}\n * @Date: {createTime}\n * @Last Modified by: {lastModifiedBy}\n * @Last Modified time: {updateTime}\n */\n",
    
        // vue组件中html代码格式化样式
        "vetur.format.defaultFormatterOptions": {
            "js-beautify-html": {
                "wrap_attributes": "force-aligned"
            }
        }
    }

以上步骤配置步骤操作完毕，重新启动vscode，编辑代码按ctrl+s会自动格式化

由于不同操作系统，代码的换行符不一致；导致eslint报错，所以得全局设置换行符为LF或CRLF

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70][]

解决办法，全局替换换行符为LF

一、编辑器安转插件

EditorConfig for VS Code

二、根目录添加文件.editorconfig

root = true
    
    [*]
    charset = utf-8
    indent_style = space
    indent_size = 2
    end_of_line = lf
    insert_final_newline = true
    trim_trailing_whitespace = true

重启vscode，按ctrl+s，即会自动修改

法二（来自网络）：

[https://github.com/DCLangX/howToAutoFixTypescript][https_github.com_DCLangX_howToAutoFixTypescript]

参考：

[vscode保存代码，自动按照eslint规范格式化代码设置][vscode_eslint]

另外的使用方式

[vscode开发vue插件推荐及eslint配置\_幻欢子-CSDN博客][vscode_vue_eslint_-CSDN]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70]: /images/20221021/52484e4ffe6c48d7ae3e39236934c57f.png
[https_github.com_DCLangX_howToAutoFixTypescript]: https://github.com/DCLangX/howToAutoFixTypescript
[vscode_eslint]: https://www.haorooms.com/post/vscode_eslint
[vscode_vue_eslint_-CSDN]: https://blog.csdn.net/u012424148/article/details/108635808