vscode如何配置ts的lint，如何配置才能让eslint和prettier不冲突一键格式化代码（vue开发使用）

最近在使用ts，发觉tslint在vscode上使用很不方便，不如eslint一键格式化高效，就想着能不能配置下vscode让其像写js一样爽

这篇文章主要解决2个问题，第一个是如何让vscode使用ts的lint，第二个是如何配置才能让eslint和prettier这2个代码格式化的vscode插件不互相冲突

vscode使用ts的lint

首先ts的lint已经不用tslint了，这个东东官方已经说不维护了，转过来做了个typescript-eslint这个eslint的插件

官方文档 https://github.com/typescript-eslint/typescript-eslint#getting-started

如果是一个干净的项目，按文档来肯定没有问题，为了写的更爽，提示更智能还是建议你继续往下读

搭配typescript-eslint 做一个更高效的配置

网上写的vscode配置eslint和prettier达到一键格式化的文章很多，个人觉得都差不多，而且文章里很多设置都已经过时了

我直接贴目前较新的写法，注释也比较清楚

 {
    // 重新设定tabsize
    "editor.tabSize": 4,
    "prettier.tabWidth": 4, // 缩进字节数
    // #每次保存的时候自动格式化
    "editor.formatOnSave": true,
    // #每次保存的时候将代码按eslint格式进行修复 ,"eslint.autoFixOnSave": true 这个已经过时了
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    // 添加 vue,ts 支持，官方是不推荐用这个，但是你为了是ts文件在vscode自动提示而不是文件编译才提示就必须加这个
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "typescript"
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    //  #默认是true加上分号，false是在有些容易出问题的地方（ASI failures）首部加分号
    //  详细请看https://prettier.io/docs/en/rationale.html#semicolons
    "prettier.semi": false,
    //  #使用单引号替代双引号,不生效就是eslint做了限制
    "prettier.singleQuote": false,
    //  #让函数(名)和后面的括号之间加个空格
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    "javascript.format.enable": false,
    // #这个按用户自身习惯选择
    "vetur.format.defaultFormatter.html": "js-beautify-html",

    // #让vue中的js按编辑器自带的ts格式进行格式化
    // 如果是ts就使用prettier-eslint ，这个需要cpm
    // 这里提示ts没有eslint这个值。但是实测是生效的
    "vetur.format.defaultFormatter.ts": "prettier-eslint",
    "vetur.format.defaultFormatter.js": "prettier-eslint",

    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "force-expand-multiline",
            "end_with_newline": false
            // #vue组件中html代码格式化样式
        }
    },
    "editor.fontSize": 16,
    "terminal.integrated.rendererType": "dom",
    "window.zoomLevel": 0,
    "vscode_vibrancy.opacity": -1,
    "vscode_vibrancy.theme": "Default Dark",
    "glassit.alpha": 220,
    "vscode_vibrancy.type": "acrylic",
    "search.followSymlinks": false,
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
    },
    "editor.detectIndentation": false,
    "vetur.format.options.tabSize": 4,
}

这是vscode配置的代码，还需要.eslintrc.js配合使用

module.exports = {
    root: true,
    env: {
        browser: true,
        es6: true,
        node: true
    },
    extends: [
        'eslint:recommended',
        'plugin:@typescript-eslint/eslint-recommended',
        'plugin:@typescript-eslint/recommended',
        'prettier/@typescript-eslint',
        'plugin:vue/essential',
        'prettier'
    ],
    globals: {
        Atomics: 'readonly',
        SharedArrayBuffer: 'readonly'
    },
    parserOptions: {
        ecmaVersion: 2018,
        parser: '@typescript-eslint/parser',
        sourceType: 'module'
    },
    plugins: ['vue', '@typescript-eslint'],
    rules: {
        'no-console': 2,
        'no-debugger': 2,
        'semi-spacing': ['error', { before: true, after: true }],
        quotes: ['error', 'single', { allowTemplateLiterals: true }]
    }
}

然后需要手动npm以下库

eslint-config-prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier-eslint

然后就能正常的使用了，但是还有个小问题没有解决，就是eslint只要配置了ts验证就会整个项目都进行ts验证，不能js文件走js验证，ts文件走ts验证

了解下安装的插件都有啥用

如果上面的代码能让你正常开发了，那么我很开心能帮助到你，但是我还想讲一下你一通操作到底是在干啥，程序员不能只会复制黏贴对吧，我大致讲下vetur prettier eslint ，其实我也也不是特别懂~

1 vetur

官方文档：https://vuejs.github.io/vetur/setup.html

使用vscode来开发vue的程序员肯定都安装了它的，但是它有哪些用，之前我也是看很多文章都推荐安装那就安了再说，这次为了兼容ts看了下官方文档讲下个人见解

它功能有语法高亮，格式化，代码检测，代码片段，还有些我不清楚不敢瞎说怕被喷的

语法高亮，代码片段就不说了，一听就懂，代码检测是指vscode能在不编译文件的情况下直接检测以vue结尾的文件，它自动安装了一些检测点比如你vue的data要用函数写法，如果你没用函数它就会配合eslint-plugin-vue给出提示

格式化是我这几天着重研究的就具体讲一下

格式化给我感觉是vetur它本身没有格式化功能，他是把别的格式化插件封装了一下，你可以通过配置选择你格式化时使用的插件



在这里我使用了prettier-eslint作为格式化工具，这个库要npm一下才能使用，他的功能是先使用prettier格式化代码风格再用eslint验证一下代码的语法然后再进一步根据eslint格式化你代码

html使用的是js-beautify-html，这个使用方式网上很多，你也看下我上面vscode配置文件是如何配置的

2 prettier，eslint

prettier主要功能是用来做代码风格格式化的，eslint主要是做语法验证的，这2个一开始我也不懂，而且有部分像是否加分号，字符串使用单引号还是双引号这些他们都可以配置

我是这么理解的eslint是给你指出问题的，它告诉你你的代码有哪里不规范然后让你自己改（它可以帮你改一小部分），而prettier是你给它指定规则，然后它帮你完成格式化，它只有一个功能就是根据你的规则格式化代码，

因为eslint有一部分代码它也可以帮你格式化，并且使用了prettier-eslint后它的权重比prettier高，所以你给prettier设置的规则不生效，就要考虑是不是eslint影响了它

eslint的vscode插件使用文档在这里：https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

值得注意的是网上很多文章说

// #让prettier使用eslint的代码格式进行校验

"prettier.eslintIntegration": true,

这个目前可以看到vscode提示说prettier已经废弃这种写法了，目前改如何使用你可以看下官方文档（我上面已经配好了的）

https://prettier.io/docs/en/integrating-with-linters.html

有任何不对的地方欢迎交流指正！