vs自动保存和eslint设置

ts语法中eslint和 Prettier 自动保存格式化语法冲突的问题

近些天学习ts，下载了
https://github.com/armour/vue-typescript-admin-template/ 进行学习。结果自动保存的代码和eslint冲突导致报错。需要忽视一些验证
下面是vscode的设置
注意需要下载Prettier插件
还有就是我习惯用tab作为空格书写,4个空格代表1个tab

{
    // vscode默认启用了根据文件类型自动设置tabsize的选项
    "editor.detectIndentation": false,
    // 重新设定tabsize
    "editor.tabSize": 4,
    // #每次保存的时候自动格式化
    "editor.formatOnSave": true,
    // 添加 vue 支持
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    "vetur.format.options.tabSize": 4,
    "vetur.format.options.useTabs": true,
    //  #让prettier使用eslint的代码格式进行校验
    "prettier.eslintIntegration": false,
    //  #使用带引号替代双引号
    "prettier.singleQuote": true,
    //  #让函数(名)和后面的括号之间加个空格
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    // #让vue中的js按编辑器自带的ts格式进行格式化
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.format.defaultFormatterOptions": {
        "prettyhtml": {},
        "js-beautify-html": {
            "wrap_attributes": "force-aligned"
            // #vue组件中html代码格式化样式
        }
    },
    "explorer.confirmDelete": false,
    "explorer.confirmDragAndDrop": false,
    "editor.renderControlCharacters": true,
    "editor.renderWhitespace": "all",
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "[json]": {
        "editor.quickSuggestions": {
            "strings": true
        },
        "editor.suggest.insertMode": "replace"
    },
    "editor.fontLigatures": null,
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
    },
    "launch": {
        "configurations": [],
        "compounds": []
    },
    "editor.quickSuggestions": true,
    "window.zoomLevel": 0,
    "editor.suggest.snippetsPreventQuickSuggestions": false,
    "files.associations": {
        "*.vue": "vue"
    },
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    },
    "fileheader.cursorMode": {
        "description": "",
        "param": "",
        "return": ""
    },
    "fileheader.configObj": {
        "autoAddLine": 100,
        "moveCursor": true,
        "createHeader": true,
        "wideSame": true,
        "wideNum": 13,
        "autoAdd": false,
        "autoAlready": true,
        "createFileTime": false,
        "dateFormat": "YYYY-MM-DD HH:mm:ss",
        "folderBlacklist": [
            "node_modules",
            "文件夹禁止自动添加头部注释"
        ],
        "prohibitItemAutoAdd": [
            "项目的全称, 整个项目禁止自动添加头部注释, 可以使用快捷键添加"
        ],
        "prohibitAutoAdd": [
            "json",
            "md"
        ],
        "filePathColon": "\\\\",
        "beforeAnnotation": {
            "py": "# !usr/bin/env python\n# -*- coding:utf-8 -*-\n"
        },
        "language": {
            "h/c/hpp/cpp": {
                "head": "/*************************************************************************************",
                "middle": " * ",
                "end": " *************************************************************************************/"
            },
            "py": {
                "head": "'''",
                "middle": " ",
                "end": "'''"
            }
        },
    },
    // 头部注释,默认设置：{'Author':'your name','Date':'Do not edit','LastEditors':'your name','LastEditTime':'Do not edit','Description':'file content'}
    "fileheader.customMade": {
        "Description": "",
        // "Version":"1.0",
        "Author": "hanker",
        "Date": "Do not edit",
        // "LastEditors":"hanker",
        // "LastEditTime":"Do not edit",
        // "FilePath":"Do not edit",
        // "custom_string_obkoro1_copyright": "Copyright (C) ${now_year} huzhenhong. All rights reserved.",
    },
    "security.workspace.trust.untrustedFiles": "open",
}

这是在框架里对一些eslint的配置

module.exports = {
    root: true,
    env: {
        node: true
    },
    extends: [
        'plugin:vue/essential',
        '@vue/standard',
        '@vue/typescript/recommended'
    ],
    parserOptions: {
        ecmaVersion: 2020
    },
    rules: {
        '@typescript-eslint/ban-types': 'off',
        '@typescript-eslint/explicit-module-boundary-types': 'off',
        '@typescript-eslint/member-delimiter-style': [0,
            {
                multiline: {
                    delimiter: 'none'
                },
                singleline: {
                    delimiter: 'comma'
                }
            }
        ],
        '@typescript-eslint/no-explicit-any': 'off',
        '@typescript-eslint/no-var-requires': 'off',
        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        // 'space-before-function-paren': ['error', 'never'],
        'vue/array-bracket-spacing': 'error',
        'vue/arrow-spacing': 'error',
        'vue/block-spacing': 'error',
        'vue/brace-style': 'error',
        'vue/camelcase': 'error',
        'comma-dangle': 0,
        'vue/component-name-in-template-casing': ['error', 'kebab-case'],
        'vue/eqeqeq': 'error',
        'vue/key-spacing': 'error',
        'vue/match-component-file-name': 'error',
        'object-curly-spacing': 0,
        'no-tabs': 0,
        'no-mixed-spaces-and-tabs': 0,
        indent: 0,
        quotes: [0, 'double'], // 0 违反错误不处理
        'no-unused-vars': 0,
        'space-before-function-paren': 0,
        'member-delimiter-style': 0,
        semi: 0,
        'eol-last': 0
    },
    overrides: [{
        files: [
            '**/__tests__/*.{j,t}s?(x)',
            '**/tests/unit/**/*.spec.{j,t}s?(x)'
        ],
        env: {
            jest: true
        }
    }]
}

这样我们ctrl+v保存的时候，就自动格式化代码，且没有报错了

如果没有想要的效果，请任意选择一个文件右击选择 格式化文档的方式，选择 vetur 或 prettier 就可以了

最后附上我下载的vscode的插件
Auto close tag
Auto Rename Tag
Beautify
Chinese(Slimplified) Language
ESlint
JavaScript(ES6) code snippets
Prettier
Vetur
Sublime Text Keymap and Setting
Korofileheader

如果vue项目报错化需要在vscode右下角选择语言模式为vue

，“EditorConfig帮助开发人员在不同的编辑器和IDE之间定义和维护一致的编码样式。EditorConfig项目由用于定义编码样式的文件格式和一组文本编辑器插件组成，这些插件使编辑器能够读取文件格式并遵循定义的样式。EditorConfig文件易于阅读，并且与版本控制系统配合使用。”
https://www.cnblogs.com/xieqian/p/10045610.html

# http://editorconfig.org

# top-most EditorConfig file
root = true

# Unix-style newlines with a newline ending every file
[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

# Indentation override for js(x), ts(x) and vue files
[*.{js,jsx,ts,tsx,vue}]
indent_size = 4
indent_style = space

# Indentation override for css related files
[*.{css,styl,scss,less,sass}]
indent_size = 4
indent_style = space

# Indentation override for html files
[*.html]
indent_size = 4
indent_style = space

# Trailing space override for markdown file
[*.md]
trim_trailing_whitespace = false

# Indentation override for config files
[*.{json,yml}]
indent_size = 4
indent_style = space

.prettierrc

{
    "htmlWhitespaceSensitivity": "ignore",
    "singleQuote":true
}