diff --git a/frontend/.eslintignore b/frontend/.eslintignore new file mode 100644 index 0000000000..b7dab5e9cb --- /dev/null +++ b/frontend/.eslintignore @@ -0,0 +1,2 @@ +node_modules +build \ No newline at end of file diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js new file mode 100644 index 0000000000..1ebe27f73c --- /dev/null +++ b/frontend/.eslintrc.js @@ -0,0 +1,41 @@ +module.exports = { + env: { + browser: true, + es2021: true, + node: true, + }, + extends: [ + 'eslint:recommended', + 'plugin:react/recommended', + 'plugin:@typescript-eslint/recommended', + 'plugin:@typescript-eslint/eslint-recommended', + ], + parser: '@typescript-eslint/parser', + parserOptions: { + ecmaFeatures: { + jsx: true, + }, + ecmaVersion: 12, + sourceType: 'module', + }, + plugins: ['react', '@typescript-eslint', 'simple-import-sort'], + rules: { + 'react/jsx-filename-extension': [ + 'error', + { + extensions: ['.tsx', '.js', '.jsx'], + }, + ], + 'react/prop-types': 'off', + '@typescript-eslint/explicit-function-return-type': 'error', + '@typescript-eslint/no-var-requires': 0, + 'linebreak-style': ['error', 'unix'], + indent: ['error', 'tab'], + quotes: ['error', 'single'], + semi: ['error', 'always'], + + // simple sort error + 'simple-import-sort/imports': 'error', + 'simple-import-sort/exports': 'error', + }, +}; diff --git a/frontend/.prettierrc.json b/frontend/.prettierrc.json index 3708afab4f..fd2d5e75d1 100644 --- a/frontend/.prettierrc.json +++ b/frontend/.prettierrc.json @@ -2,6 +2,6 @@ "trailingComma": "all", "useTabs": true, "tabWidth": 1, - "singleQuote": false, + "singleQuote": true, "jsxSingleQuote": false } diff --git a/frontend/cypress/integration/1-getting-started/todo.spec.ts b/frontend/cypress/integration/1-getting-started/todo.spec.ts index 887f791b3f..d8c9810c02 100644 --- a/frontend/cypress/integration/1-getting-started/todo.spec.ts +++ b/frontend/cypress/integration/1-getting-started/todo.spec.ts @@ -11,32 +11,32 @@ // please read our getting started guide: // https://on.cypress.io/introduction-to-cypress -describe("example to-do app", () => { +describe('example to-do app', () => { beforeEach(() => { // Cypress starts out with a blank slate for each test // so we must tell it to visit our website with the `cy.visit()` command. // Since we want to visit the same URL at the start of all our tests, // we include it in our beforeEach function so that it runs before each test - cy.visit("https://example.cypress.io/todo"); + cy.visit('https://example.cypress.io/todo'); }); - it("displays two todo items by default", () => { + it('displays two todo items by default', () => { // We use the `cy.get()` command to get all elements that match the selector. // Then, we use `should` to assert that there are two matched items, // which are the two default items. - cy.get(".todo-list li").should("have.length", 2); + cy.get('.todo-list li').should('have.length', 2); // We can go even further and check that the default todos each contain // the correct text. We use the `first` and `last` functions // to get just the first and last matched elements individually, // and then perform an assertion with `should`. - cy.get(".todo-list li").first().should("have.text", "Pay electric bill"); - cy.get(".todo-list li").last().should("have.text", "Walk the dog"); + cy.get('.todo-list li').first().should('have.text', 'Pay electric bill'); + cy.get('.todo-list li').last().should('have.text', 'Walk the dog'); }); - it("can add new todo items", () => { + it('can add new todo items', () => { // We'll store our item text in a variable so we can reuse it - const newItem = "Feed the cat"; + const newItem = 'Feed the cat'; // Let's get the input element and use the `type` command to // input our new list item. After typing the content of our item, @@ -44,7 +44,7 @@ describe("example to-do app", () => { // This input has a data-test attribute so we'll use that to select the // element in accordance with best practices: // https://on.cypress.io/selecting-elements - cy.get("[data-test=new-todo]").type(`${newItem}{enter}`); + cy.get('[data-test=new-todo]').type(`${newItem}{enter}`); // Now that we've typed our new item, let's check that it actually was added to the list. // Since it's the newest item, it should exist as the last element in the list. @@ -52,13 +52,13 @@ describe("example to-do app", () => { // Since assertions yield the element that was asserted on, // we can chain both of these assertions together into a single statement. cy - .get(".todo-list li") - .should("have.length", 3) + .get('.todo-list li') + .should('have.length', 3) .last() - .should("have.text", newItem); + .should('have.text', newItem); }); - it("can check off an item as completed", () => { + it('can check off an item as completed', () => { // In addition to using the `get` command to get an element by selector, // we can also use the `contains` command to get an element by its contents. // However, this will yield the