如何修复ReSharper的ES6类导入警告及React全局变量提示问题

Hey there, I’ve run into exactly these ReSharper warnings while working with React and ES6, so I know how frustrating they can be. Here’s how I fixed each one:

1. Class Name-Related Warnings #

If ReSharper is complaining about unknown or unused CSS class names in your className props, here’s what to do:

• Open ReSharper Options (go to ReSharper > Options in the top menu).
• Navigate to Languages > JavaScript > Inspections.
• Look for inspections like "Unknown CSS class" or "Unused CSS class":
  • For unknown classes: Add your CSS/SCSS/LESS files or entire directories to the "CSS class sources" list (found under the inspection’s settings). This tells ReSharper where to scan for valid class names.
  • For unused class warnings: If you’re using CSS Modules, enable the "CSS Modules support" option under Languages > JavaScript > Stylesheets. If it’s a false positive (the class is actually used in JSX), you can lower the inspection severity or add a /* resharper disable once UnusedCssClass */ comment above the line—though adjusting the inspection settings is better for long-term fixes.

2. "Promise is a Global Variable" Warning #

This happens when ReSharper isn’t set up to recognize ES6+ features properly. Fix it with these steps:

• Go to ReSharper > Options > Languages > JavaScript > Libraries.
• In the "Enabled libraries" section, make sure ECMAScript 6 (or a newer version like ECMAScript 2020) is checked. This tells ReSharper that Promise is a native ES6 feature, not an undefined global.

3. Warnings When Importing ES6 Classes #

If ReSharper is flagging valid ES6 imports (like "Cannot resolve module" or "Unused import"), try these fixes:

• Module resolution issues: Head to ReSharper > Options > Languages > JavaScript > Modules. Set the "Module system" to ES6 and set "Module resolution" to "Node.js" (standard for most React projects). You can also add your project’s source directories to the "Resolution roots" list to help ReSharper find local modules.
• False "unused import" warnings: If you’re importing a React component and using it in JSX, ReSharper might miss this usage. Go to Languages > JavaScript > Inspections > Unused code and adjust the "Unused import" settings—either lower its severity or enable recognition of JSX template usage. For one-off cases, you can use // resharper disable once UnusedImport, but configuring the inspection is more sustainable.

内容的提问来源于stack exchange，提问作者Mohammad Hossein Amri