chore: usage of prettier, eslint and lint-staged instead of ts-standard

.eslintignore

@@ -0,0 +1,6 @@
+.next
+.lighthouseci
+node_modules
+next-env.d.ts
+**/workbox-*.js
+**/sw.js

.eslintrc.json

@@ -0,0 +1,15 @@
+{
+  "extends": ["standard-with-typescript", "eslint-config-prettier"],
+  "plugins": ["eslint-plugin-prettier"],
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  },
+  "env": {
+    "node": true,
+    "browser": true,
+    "jest": true
+  },
+  "rules": {
+    "prettier/prettier": "error"
+  }
+}

.husky/pre-commit

@@ -1,7 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-npm run lint:docker
-npm run lint:editorconfig
-npm run lint:markdown
-npm run lint:typescript
+npm run lint:staged

.lintstagedrc.json

@@ -0,0 +1,7 @@
+{
+  "*": ["editorconfig-checker"],
+  "*.{js,ts,jsx,tsx}": ["prettier --write", "eslint --fix"],
+  "*.{css,yml,json}": ["prettier --write"],
+  "*.{md}": ["prettier --write", "markdownlint --dot --fix"],
+  "./Dockerfile": ["dockerfilelint"]
+}

.prettierignore

@@ -0,0 +1,8 @@
+.next
+.lighthouseci
+node_modules
+next-env.d.ts
+package.json
+package-lock.json
+**/workbox-*.js
+**/sw.js

.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "semi": false,
+  "trailingComma": "none"
+}

.vscode/extensions.json

@@ -1,11 +1,12 @@
 {
   "recommendations": [
+    "editorconfig.editorconfig",
+    "esbenp.prettier-vscode",
+    "dbaeumer.vscode-eslint",
     "divlo.vscode-styled-jsx-syntax",
     "divlo.vscode-styled-jsx-languageserver",
     "bradlc.vscode-tailwindcss",
-    "standard.vscode-standard",
     "mikestead.dotenv",
-    "editorconfig.editorconfig",
     "coenraads.bracket-pair-colorizer",
     "davidanson.vscode-markdownlint"
   ]

.vscode/settings.json

@@ -1,8 +1,9 @@
 {
-  "standard.enable": true,
-  "standard.engine": "ts-standard",
-  "standard.treatErrorsAsWarnings": true,
-  "standard.usePackageJson": true,
-  "standard.autoFixOnSave": true,
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "prettier.configPath": ".prettierrc.json",
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll": true
+  }
 }

components/Contact/FormResult.tsx

@@ -17,15 +17,11 @@ export const FormResult: React.FC<FormResultProps> = (props) => {
 
   if (state === 'loading' || state === 'success') {
     return (
-      <FormState state={state}>
-        {t(`home:contact.result.${state}`)}
-      </FormState>
+      <FormState state={state}>{t(`home:contact.result.${state}`)}</FormState>
     )
   }
 
   return (
-    <FormState state='error'>
-      {t(`home:contact.result.${state}`)}
-    </FormState>
+    <FormState state='error'>{t(`home:contact.result.${state}`)}</FormState>
   )
 }

components/Contact/FormState.tsx

@@ -5,7 +5,7 @@ export interface FormStateProps extends React.ComponentPropsWithRef<'p'> {
   children: string
 }
 
-export const FormState: React.FC<FormStateProps> = props => {
+export const FormState: React.FC<FormStateProps> = (props) => {
   const { state, children, ...rest } = props
   const { t } = useTranslation()
 
@@ -15,14 +15,18 @@ export const FormState: React.FC<FormStateProps> = props => {
         <p className={state} {...rest}>
           {['error', 'success'].includes(state) && (
             <b>
-              {state === 'error' ? t('home:contact.error') : t('home:contact.success')}:
+              {state === 'error'
+                ? t('home:contact.error')
+                : t('home:contact.success')}
+              :
             </b>
           )}{' '}
           {children}
         </p>
       </div>
 
-      <style jsx>{`
+      <style jsx>
+        {`
           .form-result {
             margin: 30px;
           }

components/ErrorPage.tsx

@@ -6,7 +6,7 @@ export interface ErrorPageProps {
   message: string
 }
 
-export const ErrorPage: React.FC<ErrorPageProps> = props => {
+export const ErrorPage: React.FC<ErrorPageProps> = (props) => {
   const { message, statusCode } = props
   const { t } = useTranslation()
 
@@ -19,7 +19,8 @@ export const ErrorPage: React.FC<ErrorPageProps> = props => {
         {message} <Link href='/'>{t('errors:returnToHomePage')}</Link>
       </p>
 
-      <style jsx global>{`
+      <style jsx global>
+        {`
           .content {
             display: flex;
             flex-direction: column;

components/Footer.tsx

@@ -7,7 +7,8 @@ export const Footer: React.FC = () => {
     <>
       <footer className='Footer text-center'>
         <p>
-          <span className='important'>Divlo</span> | {t('common:allRightsReserved')}
+          <span className='important'>Divlo</span> |{' '}
+          {t('common:allRightsReserved')}
         </p>
       </footer>
 

components/Head.tsx

@@ -7,7 +7,7 @@ interface HeadProps {
   url?: string
 }
 
-export const Head: React.FC<HeadProps> = props => {
+export const Head: React.FC<HeadProps> = (props) => {
   const {
     title = 'Divlo',
     image = '/images/icons/icon-96x96.png',

components/Interests/InterestsList/InterestItem.tsx

@@ -7,7 +7,7 @@ interface InterestItemProps {
   fontAwesomeIcon: IconDefinition
 }
 
-export const InterestItem: React.FC<InterestItemProps> = props => {
+export const InterestItem: React.FC<InterestItemProps> = (props) => {
   const { fontAwesomeIcon, title } = props
 
   return (

components/Interests/index.tsx

@@ -6,9 +6,13 @@ import { InterestsList } from './InterestsList'
 export const Interests: React.FC = () => {
   const { t } = useTranslation()
 
-  const paragraphs: InterestParagraphProps[] = t('home:interests.paragraphs', {}, {
+  const paragraphs: InterestParagraphProps[] = t(
+    'home:interests.paragraphs',
+    {},
+    {
       returnObjects: true
-  })
+    }
+  )
 
   return (
     <>

components/Portfolio/PortfolioItem.tsx

@@ -7,7 +7,7 @@ export interface PortfolioItemProps {
   image: string
 }
 
-export const PortfolioItem: React.FC<PortfolioItemProps> = props => {
+export const PortfolioItem: React.FC<PortfolioItemProps> = (props) => {
   const { title, description, link, image } = props
 
   return (

components/Portfolio/index.tsx

@@ -5,9 +5,13 @@ import { PortfolioItem, PortfolioItemProps } from './PortfolioItem'
 export const Portfolio: React.FC = () => {
   const { t } = useTranslation('home')
 
-  const items: PortfolioItemProps[] = t('home:portfolio.items', {}, {
+  const items: PortfolioItemProps[] = t(
+    'home:portfolio.items',
+    {},
+    {
       returnObjects: true
-  })
+    }
+  )
 
   return (
     <>

components/Profile/ProfileList/ProfileItem.tsx

@@ -4,7 +4,7 @@ interface ProfileItemProps {
   link?: string
 }
 
-export const ProfileItem: React.FC<ProfileItemProps> = props => {
+export const ProfileItem: React.FC<ProfileItemProps> = (props) => {
   const { title, value, link } = props
 
   return (

components/Profile/ProfileList/index.tsx

@@ -8,10 +8,7 @@ export const ProfileList: React.FC = () => {
   return (
     <>
       <ul className='profile-list'>
-        <ProfileItem
-          title={t('home:about.birthDate')}
-          value='31/03/2003'
-        />
+        <ProfileItem title={t('home:about.birthDate')} value='31/03/2003' />
         <ProfileItem
           title={t('home:about.nationality')}
           value='Alsace, France'

components/Profile/ProfileLogo.tsx

@@ -14,7 +14,8 @@ export const ProfileLogo: React.FC = () => {
         </div>
       </div>
 
-      <style jsx>{`
+      <style jsx>
+        {`
           .profile-logo {
             margin-right: 10px;
             margin-left: 10px;

components/Profile/SocialMediaList/SocialMediaItem.tsx

@@ -6,7 +6,7 @@ interface SocialMediaItemProps {
   socialMedia: 'Email' | 'GitHub' | 'Twitch' | 'Twitter' | 'YouTube'
 }
 
-export const SocialMediaItem: React.FC<SocialMediaItemProps> = props => {
+export const SocialMediaItem: React.FC<SocialMediaItemProps> = (props) => {
   const { link, socialMedia } = props
 
   return (

components/Profile/SocialMediaList/index.tsx

@@ -25,7 +25,8 @@ export const SocialMediaList: React.FC = () => {
         </ul>
       </div>
 
-      <style jsx>{`
+      <style jsx>
+        {`
           .social-media-list {
             margin: 0;
             padding: 0;

components/Skills/Skill.tsx

@@ -6,7 +6,7 @@ export interface SkillProps {
   skill: keyof typeof skills
 }
 
-export const Skill: React.FC<SkillProps> = props => {
+export const Skill: React.FC<SkillProps> = (props) => {
   const { skill } = props
   const skillProperties = skills[skill]
 
@@ -29,7 +29,8 @@ export const Skill: React.FC<SkillProps> = props => {
         </div>
       </a>
 
-      <style jsx>{`
+      <style jsx>
+        {`
           .skills-link {
             max-width: 120px;
             margin: 0px 10px 0 10px;

components/Skills/SkillsSection.tsx

@@ -5,7 +5,7 @@ export interface SkillsSectionProps {
   children: React.ReactNode
 }
 
-export const SkillsSection: React.FC<SkillsSectionProps> = props => {
+export const SkillsSection: React.FC<SkillsSectionProps> = (props) => {
   const { title, children } = props
 
   return (
@@ -23,7 +23,8 @@ export const SkillsSection: React.FC<SkillsSectionProps> = props => {
         </div>
       </ShadowContainer>
 
-      <style jsx>{`
+      <style jsx>
+        {`
           .skills-header {
             border-bottom: 1px solid rgba(255, 255, 255, 0.1);
             margin-bottom: 15px;

components/design/Input.tsx

@@ -16,7 +16,8 @@ export const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
         </label>
       </div>
 
-      <style jsx>{`
+      <style jsx>
+        {`
           .form-group-animation {
             position: relative;
             margin-top: 10px;

components/design/RevealFade.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react'
 
-export const RevealFade: React.FC = props => {
+export const RevealFade: React.FC = (props) => {
   const { children } = props
 
   const htmlElement = useRef<HTMLDivElement>(null)
@@ -8,7 +8,7 @@ export const RevealFade: React.FC = props => {
   useEffect(() => {
     const observer = new window.IntersectionObserver(
       (entries, observer) => {
-        entries.forEach(entry => {
+        entries.forEach((entry) => {
           if (entry.isIntersecting) {
             entry.target.classList.add('reveal-visible')
             observer.unobserve(entry.target)
@@ -30,7 +30,8 @@ export const RevealFade: React.FC = props => {
         {children}
       </div>
 
-      <style jsx>{`
+      <style jsx>
+        {`
           .reveal {
             opacity: 0;
             visibility: hidden;

components/design/ShadowContainer.tsx

@@ -1,6 +1,6 @@
 type ShadowContainerProps = React.ComponentPropsWithRef<'div'>
 
-export const ShadowContainer: React.FC<ShadowContainerProps> = props => {
+export const ShadowContainer: React.FC<ShadowContainerProps> = (props) => {
   const { children, className, ...rest } = props
 
   return (

components/design/Textarea.tsx

@@ -16,7 +16,8 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
           <textarea id={name} name={name} ref={ref} {...rest} />
         </div>
 
-        <style jsx>{`
+        <style jsx>
+          {`
             .form-group {
               padding-top: 15px;
               margin-bottom: 30px;

components/design/Tooltip.tsx

@@ -3,7 +3,7 @@ interface TooltipProps extends React.ComponentPropsWithRef<'div'> {
   children: React.ReactNode
 }
 
-export const Tooltip: React.FC<TooltipProps> = props => {
+export const Tooltip: React.FC<TooltipProps> = (props) => {
   const { title, children, ...rest } = props
   return (
     <>
@@ -12,7 +12,8 @@ export const Tooltip: React.FC<TooltipProps> = props => {
         <span className='title'>{title}</span>
       </span>
 
-      <style jsx>{`
+      <style jsx>
+        {`
           .title {
             color: #fff;
             font-size: 11px;

package.json

@@ -6,22 +6,6 @@
     "type": "git",
     "url": "https://github.com/Divlo/Divlo"
   },
-  "ts-standard": {
-    "ignore": [
-      ".next",
-      ".lighthouseci",
-      "node_modules",
-      "next-env.d.ts",
-      "**/workbox-*.js",
-      "**/sw.js"
-    ],
-    "envs": [
-      "node",
-      "browser",
-      "jest"
-    ],
-    "report": "stylish"
-  },
   "scripts": {
     "dev": "next dev",
     "start": "next start",
@@ -30,8 +14,9 @@
     "lint:commit": "commitlint",
     "lint:docker": "dockerfilelint './Dockerfile'",
     "lint:editorconfig": "editorconfig-checker",
-    "lint:markdown": "markdownlint '**/*.md' --dot --ignore node_modules",
-    "lint:typescript": "ts-standard",
+    "lint:markdown": "markdownlint '*.md' --dot --ignore node_modules",
+    "lint:typescript": "eslint '*.{js,ts,jsx,tsx}'",
+    "lint:staged": "lint-staged",
     "lighthouse": "lhci autorun",
     "test": "jest",
     "release": "semantic-release",
@@ -70,18 +55,27 @@
     "@types/react": "17.0.4",
     "@types/styled-jsx": "2.2.8",
     "@types/validator": "13.1.3",
+    "@typescript-eslint/eslint-plugin": "4.22.0",
     "autoprefixer": "10.2.5",
     "babel-jest": "26.6.3",
     "dockerfilelint": "1.8.0",
     "editorconfig-checker": "4.0.2",
+    "eslint": "7.25.0",
+    "eslint-config-prettier": "8.3.0",
+    "eslint-config-standard-with-typescript": "20.0.0",
+    "eslint-plugin-import": "2.22.1",
+    "eslint-plugin-node": "11.1.0",
+    "eslint-plugin-prettier": "3.4.0",
+    "eslint-plugin-promise": "4.3.1",
     "husky": "6.0.0",
     "jest": "26.6.3",
+    "lint-staged": "10.5.4",
     "markdownlint-cli": "0.27.1",
     "node-mocks-http": "1.10.1",
     "postcss": "8.2.13",
+    "prettier": "2.2.1",
     "semantic-release": "17.4.2",
     "tailwindcss": "2.1.2",
-    "ts-standard": "10.0.0",
     "typescript": "4.2.4"
   }
 }

pages/index.tsx

@@ -30,7 +30,11 @@ const Home: React.FC = () => {
       </RevealFade>
 
       <RevealFade>
-        <Section id='skills' heading={t('home:skills.title')} withoutShadowContainer>
+        <Section
+          id='skills'
+          heading={t('home:skills.title')}
+          withoutShadowContainer
+        >
           <Skills />
         </Section>
       </RevealFade>