I recently started a project where they are using camelCase class names in the JSX, but kebab-case in the SCSS.
When Webpack builds the solution, the kebab-case class names are converted to camelCase by the css-loader. WebStorm is showing code warnings for all the class names however in the JSX because it doesn't recognise this.
Is there a way to configure it to realise that they exist in kebab-case form and remove the warnings? I don't want to just turn the rule off because it's quite useful to spot the classes that are actually missing from the SCSS.
there is no way to configure this in Webstorm; please vote for WEB-28203 to be notified on any progress with this feature
Related
I want to use Terser's webpack plugin to uglify (mangle property names) in my project. The problem is webpack/babel is fixated on transpiling getter/setter properties to a syntax that I assume is compatible with ES5, hence the output code only contains these getter/setter property names as magic strings, so Terser won't detect they have a reference to the callsite in which they're used. The result is lots of properties being undefined, since they're using their original names, but called by a mangled name. I don't at all care about browser support, so I'd like the transpile process to result in ES6 syntax, which Terser can understand and mangle without issues. Thanks!
I'm developing a react project. I use postcss-nested plugin to support css nested rule, and use babel-plugin-react-css-modules to support css modules in react. Finally, the css styles can work well so I'm sure there is no problem with these 2 plugins. But it seems that the vscode can't regonize the css nested rules. It display an underline to give an warning, like this:
Now vscode can't give tips when coding. I have to type the css property names completely. Is there any idea about my problem?
I've also ran into this issue while utilizing nesting. Because nesting is not officially apart of vanilla css VS code is automatically spitting out errors. The best way to fix this issue is to install the VS Code plugin https://marketplace.visualstudio.com/items?itemName=csstools.postcss. this will fix up those nasty little errors. Let me know if that helps you out.
I'm trying to use Eslint to enforce PascalCase on my React components.
I've looked at all the existing plugins/rules I could find, and here are my issues:
I'm using Typescript (.tsx extensions), so react/jsx-pascal-case won't work for me.
For files that are not components, I do want to allow kebab-case, so i'd like to filter out only files with the .tsx extension.
TL;DR - Id like an Eslint rule to enforce PascalCase, but only on files ending with .tsx.
Thanks!
You could consider the typescript-eslint extension for your eslint setup.
Then, you may refer to the naming-convention rule, which will allow you to enforce pascal case for your components.
Looks like what I needed was the eslint-plugin-filenames plugin and it's "filenames/match-exported" rule. This doesn't enforce that the actual component is called using pascal case, but this can be enforced maybe using #wentjun's answer
Trying to get decorator syntax working for react css modules as shown here.
https://github.com/gajus/react-css-modules#decorator
I've got react-css-modules working using the function syntax, e.g.
CSSModules(Table, styles)
but when using decorators, e.g.
#CSSModules(styles)
export default class extends React.Component {}
nothing seems to be instantiated and no errors are thrown either. I've got the babel-plugin-syntax-decorators loaded.
What could I be missing? Thanks!!
I wasn't able to use that syntax too. It seems that react-scripts uses some babel plugin for running typescript, and that plugin isn't much typescript. So if you're using react-scripts with typescript, consider that it's not "full" typescript, and there is some stuff not working as you could expect.
Also, you can consider using patch-styles instead of react-css-modules. It's much simpler, doesn't require any changes in your project at all, and PatchStyles provides the same with a lot simpler react component.
I'm using Notepad++ and I just started to learn React js and the JSX syntax extension but not having the styling makes it difficult to read. I'm not sure If I could implement the styles into Notepad++ or even if it's possible to import a JSX pre-processor or plugin. I was looking into installing Babel but I would also have to install NPM and Node js ect. and I'm not sure if that would be the best approach. Or is there a different IDE I should be using?
I was able to find the answer to my own problem. I was viewing the code in the html language because the js was included in a .html file. When I switch the language to Javascript the styles looked perfectly fine. The first <h2> tag in JSX threw off the rest of the code styles. Beginner's mistake.