vscode配置react样式模块化开发代码提示

一、配置css模块化的代码提示

• 1、关于css模块化开发可以参考文档，参考文档，这样写代码没样式名的提示也不是很友好的，以下配置可以提示类名的方式

  

• 2、安装依赖包

  npm install typescript-plugin-css-modules -D
  

• 、在tsconfig.json中配置插件的使用

  {
    "compilerOptions": {
      ...
      // 添加下面配置
      "plugins": [
        {
          "name": "typescript-plugin-css-modules"
        }
      ]
    },
    "include": [
      "src"
    ]
  }
  

• 4、在项目的根目录下配置vscode的配置

  // .vscode/settings.json文件中
  
  {
  	"typescript.tsdk": "node_modules/typescript/lib",
  	"typescript.enablePromptUseWorkspaceTsdk": true
  }
  

• 5、创建文件src/types/custom.d.ts

  declare module "*.css" {
    const css: { [key: string]: string };
    export default css;
  }
  

• 6、这时候样式有代码提示