[开发工具]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代码格式化样式
         }
     },
     "window.zoomLevel": 0,
     "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"
    }
 
}

这是在框架里对一些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