Eslint 不格式化 .ts 文件

Question

I am trying to get eslint to format my .ts files. .tsx works fine but for some reason .ts does not.

my eslinrc

{
  //   "extends": "airbnb"
  "extends": ["airbnb-typescript", "plugin:jsx-a11y/recommended", "prettier"],
  "env": {
    "browser": true
  },
  "settings": {
    "import/resolver": {
      "node": {
        "paths": ["src"]
      }
    }
  },
  "plugins": ["prettier"],
  "rules": {
    "react/jsx-one-expression-per-line": 0,
    "react/jsx-props-no-spreading": 0,
    "react/prop-types": 0,
    "import/prefer-default-export": 0,
    "@typescript-eslint/no-unused-vars": 0,
    "@typescript-eslint/no-use-before-define": 0,
    "no-unneeded-ternary": 0,
    "react/jsx-uses-react": "off",
    "react/react-in-jsx-scope": "off",
    "react/destructuring-assignment": 0
  },
  "parserOptions": {
    "project": ["./tsconfig.json"]
  }
}

tsconfig:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": "src",
    "noFallthroughCasesInSwitch": true,
    "strictFunctionTypes": false
  },
  "include": ["src"]
}

poackage.json:

{
    "name": "frontend-fe",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@babel/preset-react": "^7.14.5",
        "@types/prop-types": "^15.7.4",
        "@types/react-router": "^5.1.16",
        "axios": "^0.21.1",
        "bootstrap": "^5.0.2",
        "core-js": "^3.16.0",
        "dotenv": "^10.0.0",
        "embla-carousel": "^4.5.3",
        "history": "^4.10.1",
        "i18next": "^20.3.5",
        "i18next-parser": "^4.3.0",
        "loglevel": "^1.7.1",
        "node-sass": "^6.0.1",
        "prop-types": "^15.7.2",
        "react": "^17.0.2",
        "react-bootstrap": "^2.0.0-beta.4",
        "react-combine-reducers": "^1.1.1",
        "react-dom": "^17.0.2",
        "react-feather": "^2.0.9",
        "react-i18next": "^11.11.4",
        "react-router": "^5.2.0",
        "react-router-dom": "^5.2.0",
        "react-scripts": "^4.0.3",
        "styled-components": "^5.3.0"
    },
    "devDependencies": {
        "@babel/core": "^7.15.0",
        "@babel/eslint-parser": "^7.14.9",
        "@rollup/plugin-babel": "^5.3.0",
        "@testing-library/jest-dom": "^5.14.1",
        "@testing-library/react": "^12.0.0",
        "@types/node": "16.4.12",
        "@types/react": "^17.0.15",
        "@types/react-combine-reducers": "^1.0.0",
        "@types/react-dom": "^17.0.9",
        "@types/react-router-dom": "^5.1.8",
        "@types/styled-components": "^5.1.12",
        "@typescript-eslint/parser": "^4.29.0",
        "eslint": "^7.32.0",
        "eslint-config-airbnb": "^18.2.1",
        "eslint-config-airbnb-typescript": "^12.3.1",
        "eslint-config-prettier": "^8.3.0",
        "eslint-plugin-import": "^2.23.4",
        "eslint-plugin-jsx-a11y": "^6.4.1",
        "eslint-plugin-prettier": "^3.4.0",
        "eslint-plugin-react": "^7.24.0",
        "eslint-plugin-react-hooks": "^4.2.0",
        "husky": "^7.0.1",
        "lint-staged": "^11.1.1",
        "prettier": "^2.3.2",
        "typescript": "^4.3.5"
    },
    "resolutions": {
        "styled-components": "^5"
    },
    "scripts": {
        "start": "react-scripts start",
        "dev": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "test:coverage": "react-scripts test --coverage --watchAll=false",
        "lint": "eslint ./src/*.{ts,tsx} ./src/**/*.{ts,tsx} --max-warnings 0",
        "generate:translations": "i18next 'src/**/*.{ts,tsx}' --config './i18next-parser.config.js'",
        "checkUpdate": "npm-check-updates",
        "updateConfig": "ncu-u"
    },
    "lint-staged": {
        "src/**/!(*test).{js,jsx,ts,tsx,json}": [
            "prettier --write",
            "eslint --max-warnings 0",
            "git add"
        ]
    },
    "husky": {
        "hooks": {
            "pre-commit": "lint-staged",
            "commit-msg": "sh commit-message.sh"
        }
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    },
    "jest": {
        "collectCoverageFrom": [
            "src/**/*.{js,jsx,ts,tsx}",
            "!src/index.tsx",
            "!src/*.d.ts",
            "!<rootDir>/node_modules/",
            "!<rootDir>/path/to/dir/"
        ],
        "coverageThreshold": {
            "global": {
                "branches": 90,
                "functions": 90,
                "lines": 90,
                "statements": 90
            }
        }
    }
}

pressing ctrl +s in vs-code inside of a .ts file and not formatting occurs.

what am I missing?

EDIT: vscode formatt-settings:

{
    "window.zoomLevel": -1,
    "typescript.updateImportsOnFileMove.enabled": "never",
    "breadcrumbs.enabled": true,
    "editor.tabSize": 2,
    "editor.fastScrollSensitivity": 15,
    "editor.mouseWheelScrollSensitivity": 5,
    "diffEditor.ignoreTrimWhitespace": false,
    "javascript.updateImportsOnFileMove.enabled": "always",
    "[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[git-rebase]": {
        "workbench.editor.restoreViewState": false
    },
    "explorer.confirmDelete": false,
    "files.autoSave": "afterDelay",
    "editor.formatOnSave": true,
    "editor.fontWeight": null
}

Answer 1

确保在 Visual Studio Code settings.json文件eslint.format.enable设置为true 。

Answer 2

Seems like your global Vscode settings contain rule, that override global defaultFormatter for typescript language. Declare explicitly

"[typescript]": {
    // override if setted per-language
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

Important note: If you have Vscode with version at least November 2021 (version 1.63) multiple language declaration style currently have lower priority than single style. For example "[javascript][typescript]" not override "[typescript]"