update rules lint

.eslintrc.json

@@ -1,46 +1,43 @@
 {
-    "env": {
-      "jest": true,
-      "browser": true,
-      "es2021": true
+  "env": {
+    "jest": true,
+    "browser": true,
+    "es2021": true
+  },
+  "globals": {
+    "Atomics": "readonly",
+    "SharedArrayBuffer": "readonly"
+  },
+  "extends": [
+    "airbnb",
+    "prettier",
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:prettier/recommended"
+  ],
+  "parser": "@babel/eslint-parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true,
+      "modules": true
     },
-    "globals": {
-      "Atomics": "readonly",
-      "SharedArrayBuffer": "readonly"
-    },
-    "extends": [
-      "airbnb",
-      "prettier",
-      "eslint:recommended",
-      "plugin:react/recommended",
-      "plugin:react-hooks/recommended",
-      "plugin:prettier/recommended"
-    ],
-    "parser": "@babel/eslint-parser",
-    "parserOptions": {
-        "ecmaFeatures": {
-            "jsx": true,
-            "modules": true
-        },
-        "ecmaVersion": 12,
-        "sourceType": "module"
-    },
-    "plugins": [
-      "react",
-      "react-hooks"
-    ],
-    "rules": {
-      "react/function-component-definition": 0,
-      "react/react-in-jsx-scope": "off",
-      "no-unused-vars": "warn",
-      "import/prefer-default-export": "off",
-      "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
-    },
-    "settings": {
-      "import/resolver": {
-        "node": {
-          "paths": ["src"]
-        }
+    "ecmaVersion": 12,
+    "sourceType": "module"
+  },
+  "plugins": ["react", "react-hooks"],
+  "rules": {
+    "react/function-component-definition": 0,
+    "react/react-in-jsx-scope": "off",
+    "no-unused-vars": "warn",
+    "import/prefer-default-export": "off",
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
+  },
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "paths": ["src"]
       }
     }
+  }
 }

.prettierrc

@@ -1,5 +1,6 @@
 {
-  "trailingComma": "none",
-  "semi": false,
-  "singleQuote": true
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "endOfLine": "auto"
 }

.vscode/settings.json

@@ -8,5 +8,5 @@
   },
   "emmet.includeLanguages": {
     "javascript": "javascriptreact"
-  },
+  }
 }

README.md

@@ -18,4 +18,4 @@ yarn start
 yarn test
 ```
 
-Made with 💜  by theandersonn
+Made with 💜 by theandersonn

package.json

@@ -15,7 +15,8 @@
     "test:watch": "react-scripts test --watch",
     "test:coverage": "react-scripts test --coverage --watchAll=false",
     "eject": "react-scripts eject",
-    "lint": "eslint src --max-warnings=0"
+    "lint": "eslint ./src --ext .jsx,.js",
+    "prettier:fix": "prettier --write ."
   },
   "browserslist": {
     "production": [

src/App.js

@@ -1,12 +1,12 @@
-import { ThemeProvider } from 'styled-components'
-import GlobalStyles from 'styles/global'
-import theme from 'styles/theme'
+import { ThemeProvider } from 'styled-components';
+import GlobalStyles from 'styles/global';
+import theme from 'styles/theme';
 
-import Main from 'components/Main'
-import Header from 'components/Header'
-import ScreenWrapper from 'components/ScreenWrapper'
-import Footer from 'components/Footer'
-import GithubCorner from 'react-github-corner'
+import Main from 'components/Main';
+import Header from 'components/Header';
+import ScreenWrapper from 'components/ScreenWrapper';
+import Footer from 'components/Footer';
+import GithubCorner from 'react-github-corner';
 
 const App = () => (
   <ThemeProvider theme={theme}>
@@ -22,6 +22,6 @@ const App = () => (
       />
     </Main>
   </ThemeProvider>
-)
+);
 
-export default App
+export default App;

src/components/Footer/__tests__/test.jsx

@@ -1,17 +1,17 @@
-import { screen } from '@testing-library/react'
-import { render } from 'utils/test-utils'
+import { screen } from '@testing-library/react';
+import { render } from 'utils/test-utils';
 
-import Footer from '..'
+import Footer from '..';
 
 describe('<Footer />', () => {
   it('should render correctly', () => {
-    const { container } = render(<Footer />)
+    const { container } = render(<Footer />);
 
     expect(screen.getByRole('link', { name: /theandersonn/i })).toHaveAttribute(
       'href',
       'https://github.com/theandersonn'
-    )
+    );
 
-    expect(container.firstChild).toMatchSnapshot()
-  })
-})
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

src/components/Footer/index.jsx

@@ -1,6 +1,6 @@
-import { TiHeart as HeartIcon } from 'react-icons/ti'
+import { TiHeart as HeartIcon } from 'react-icons/ti';
 
-import * as S from './styles'
+import * as S from './styles';
 
 const Footer = () => {
   return (
@@ -14,7 +14,7 @@ const Footer = () => {
         theandersonn
       </a>
     </S.Wrapper>
-  )
-}
+  );
+};
 
-export default Footer
+export default Footer;

src/components/Footer/styles.js

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components'
+import styled, { css } from 'styled-components';
 
 export const Wrapper = styled.footer`
   ${({ theme }) => css`
@@ -22,4 +22,4 @@ export const Wrapper = styled.footer`
       }
     }
   `}
-`
+`;

src/components/Header/__tests__/test.jsx

@@ -1,15 +1,15 @@
-import { screen } from '@testing-library/react'
-import { render } from 'utils/test-utils'
+import { screen } from '@testing-library/react';
+import { render } from 'utils/test-utils';
 
-import Header from '..'
+import Header from '..';
 
 describe('<Header />', () => {
   it('should render correctly and have title', () => {
-    const { container } = render(<Header />)
+    const { container } = render(<Header />);
 
     expect(
       screen.getByRole('heading', { name: /what is my screen resolution\?/i })
-    ).toBeInTheDocument()
+    ).toBeInTheDocument();
 
     expect(container.firstChild).toMatchInlineSnapshot(`
       <header
@@ -19,6 +19,6 @@ describe('<Header />', () => {
           What Is My Screen Resolution?
         </h1>
       </header>
-    `)
-  })
-})
+    `);
+  });
+});

src/components/Header/index.jsx

@@ -1,11 +1,11 @@
-import * as S from './styles'
+import * as S from './styles';
 
 const Header = () => {
   return (
     <S.Wrapper>
       <h1>What Is My Screen Resolution?</h1>
     </S.Wrapper>
-  )
-}
+  );
+};
 
-export default Header
+export default Header;

src/components/Header/styles.js

@@ -1,5 +1,5 @@
-import styled, { css } from 'styled-components'
-import media from 'styled-media-query'
+import styled, { css } from 'styled-components';
+import media from 'styled-media-query';
 
 export const Wrapper = styled.header`
   ${({ theme }) => css`
@@ -18,4 +18,4 @@ export const Wrapper = styled.header`
         font-size: ${theme.font.sizes.xxlarge};
       `}
   `}
-`
+`;

src/components/Main/__tests__/test.jsx

@@ -1,17 +1,17 @@
-import { render } from 'utils/test-utils'
+import { render } from 'utils/test-utils';
 
-import Main from '..'
+import Main from '..';
 
 describe('<Main />', () => {
   it('should render correctly', () => {
-    const { container } = render(<Main>Children</Main>)
+    const { container } = render(<Main>Children</Main>);
 
     expect(container.firstChild).toMatchInlineSnapshot(`
       <main
         class="sc-bczRLJ iRpuYl"
       >
         Children
       </main>
-    `)
-  })
-})
+    `);
+  });
+});

src/components/Main/index.jsx

@@ -1,13 +1,13 @@
-import PropTypes from 'prop-types'
+import PropTypes from 'prop-types';
 
-import * as S from './styles'
+import * as S from './styles';
 
 const Main = ({ children }) => {
-  return <S.Wrapper>{children}</S.Wrapper>
-}
+  return <S.Wrapper>{children}</S.Wrapper>;
+};
 
 Main.propTypes = {
-  children: PropTypes.node.isRequired
-}
+  children: PropTypes.node.isRequired,
+};
 
-export default Main
+export default Main;

src/components/Main/styles.js

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components'
+import styled, { css } from 'styled-components';
 
 export const Wrapper = styled.main`
   ${({ theme }) => css`
@@ -12,4 +12,4 @@ export const Wrapper = styled.main`
     height: 100vh;
     background-color: ${theme.colors.primary};
   `}
-`
+`;

src/components/ScreenResolution/index.jsx

@@ -1,4 +1,4 @@
-import * as S from './styles'
+import * as S from './styles';
 
 const ScreenResolution = () => {
   return (
@@ -13,7 +13,7 @@ const ScreenResolution = () => {
         </p>
       </S.Description>
     </S.Wrapper>
-  )
-}
+  );
+};
 
-export default ScreenResolution
+export default ScreenResolution;

src/components/ScreenResolution/styles.js

@@ -1,5 +1,5 @@
-import styled, { css } from 'styled-components'
-import media from 'styled-media-query'
+import styled, { css } from 'styled-components';
+import media from 'styled-media-query';
 
 export const Wrapper = styled.article`
   ${({ theme }) => css`
@@ -14,7 +14,7 @@ export const Wrapper = styled.article`
       margin-top: ${theme.spacings.xxsmall};
     }
   `}
-`
+`;
 
 export const Title = styled.h2`
   ${({ theme }) => css`
@@ -23,7 +23,7 @@ export const Title = styled.h2`
     border-bottom: 0.1rem solid ${theme.colors.white};
     padding: ${theme.spacings.xxsmall} ${theme.spacings.xsmall};
   `}
-`
+`;
 
 export const Description = styled.div`
   ${({ theme }) => css`
@@ -37,4 +37,4 @@ export const Description = styled.div`
       color: ${theme.colors.secondary};
     }
   `}
-`
+`;