Error eslint in Webstorm?

Use styled-components React eslint in webstorm complains at this code

const Items = styled.div`
 position: relative;
 flex: 1;
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 grid-gap: 1rem;
 margin-top: 1rem;
 transition: 0.25 s;

 @media ${(p) => p.theme.device.tablet} {
 grid-template-columns: repeat(3, 1fr);
}

 @media ${(p) => p.theme.device.laptop} {
 grid-template-columns: ${(p) => (p.isOpenFilter ? 'repeat(4, 1fr)' : 'repeat(5, 1fr)')};
}
`;


Error on line media request
Warning:(114, 9) Property 'grid-template-columns' is allowed only in the following media groups: visual

What it is and how to fix it?
March 23rd 20 at 19:33
1 answer
March 23rd 20 at 19:35
Solution
ESLint nothing to do with and it is not an error but warning. This is a plugin styled-components or analyzer which uses this plugin in webstorm throws a warning because you have not explicitly declared media request and he can't match his type. Offer to score.
The fact that I have a hook configured - can't zammitti until all of the GTA V on garage door not fixed, so score is not an option :) - Mavis65 commented on March 23rd 20 at 19:38
how to explicitly declare a request? - Mavis65 commented on March 23rd 20 at 19:41
@Mavis65, clearly is to write something like:
@media screen and (max-width: 767px) {}

But I think it is not your option. Try to write the helper methods in the documentation to come to declarations of the form:
${media.mobile`
 some-rule: value;
`}

Then the code analyzer will not even realize that this is a media query. - Alta commented on March 23rd 20 at 19:44
@Mavis65, try git commit-nm "message" so you ignore all of the hooks - felton_Auer commented on March 23rd 20 at 19:47

Find more questions by tags LinterReactWebStorm