Question

我自己从来没有配置过这个，通常只是在工作中使用其他人设置的。当我在 .tsx 文件中键入 JSX 元素、属性自动完成以及其他自动完成时，我想这样做。这是我所拥有的。

package.json：

{
  "dependencies": {
    "@babel/polyfill": "^7.12.1",
    "@emotion/styled": "^11.3.0",
    "antd": "^4.16.7",
    "babel-preset-react": "^6.24.1",
    "babel-register": "^6.26.0",
    "cross-fetch": "^3.1.4",
    "express": "^4.17.1",
    "lodash": "^4.17.20",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "regenerator": "^0.14.7",
    "tinycolor2": "^1.4.2",
    "webfontloader": "^1.6.28"
  },
  "devDependencies": {
    "@babel/core": "^7.13.15",
    "@babel/preset-env": "^7.12.10",
    "@babel/preset-react": "^7.12.10",
    "@types/mini-css-extract-plugin": "^2.0.1",
    "@types/react": "^17.0.14",
    "@types/react-dom": "^17.0.9",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.0.1",
    "express": "^4.17.1",
    "mini-css-extract-plugin": "^2.1.0",
    "style-loader": "^2.0.0",
    "ts-loader": "^9.2.3",
    "typescript": "^4.3.5",
    "webpack": "^5.10.2",
    "webpack-cli": "^4.2.0",
    "webpack-dev-middleware": "^5.0.0"
  }
}

tsconfig.json：

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "sourceMap": true,
    "noImplicitAny": true,
    "esModuleInterop": true,
    "jsx": "react",
    "baseUrl": "./",
    "outDir": "./build",
    "paths": {
      "~/*": [".//*"],
      "@/*": [".//*"],
      "~~/*": [".//*"],
      "@@/*": [".//*"]
    }
  },
  "exclude": ["node_modules", ".cache", "dist"]
}

babel.config.json：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "node": "current"
      }
    }],
    "@babel/preset-react"
  ]
}

webpack.config.js：

const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const isDev = process.env.NODE_ENV !== 'production'

module.exports = {
  mode: 'development',
  devtool: 'eval-cheap-source-map',
  entry: {
    build: path.resolve(__dirname, '../frontend/index.js')
  },
  output: {
    publicPath: '/',
    path: path.resolve(__dirname, '../frontend/build')
  },
  resolve: {
    extensions: ['', '.js', '.ts', '.tsx'],
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [isDev ? 'style-loader' : MiniCssExtractPlugin.loader, 'css-loader']
      },
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: ['ts-loader']
      },
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].[contenthash].css",
    }),
  ],
  watchOptions: {
    ignored: /node_modules/,
  },
  devServer: {
    headers: {
      'Cache-Control': 'no-store',
    },
  },
}

server.js：

const path = require('path')
const express = require('express')
const webpack = require('webpack')
const webpackDevMiddleware = require('webpack-dev-middleware')
const webpackConfig = require('./webpack.config.js')

const app = express()

const compiler = webpack(webpackConfig)

app.use(webpackDevMiddleware(compiler, {
  publicPath: webpackConfig.output.publicPath
}))

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'index.html'))
})

app.use(express.static(path.join(__dirname, 'build')))

app.listen(4000)

index.js：

import React from 'react'
import ReactDOM from 'react-dom'
import App from './components/App'

ReactDOM.render(<App />, document.getElementById('mount'))

App.tsx：

import React from 'react'
import 'antd/dist/antd.css'
import { Layout } from 'antd';

const { Header, Footer, Sider, Content } = Layout;

function App() {
  return (
    <Layout>
      <Sider>Sider</Sider>
      <Layout>
        <Header>Header</Header>
        <Content>Content</Content>
        <Footer>Footer</Footer>
      </Layout>
    </Layout>
  )
}

export default App

这是我输入时看到的：

也就是说，不会发生自动完成。我已经多次重新启动 VSCode，甚至使用网站上的最新版本重新安装它。任何想法我缺少什么？

VSCode TypeScript JSX 属性自动完成不起作用

0 个答案: