Configuring ESLint and Prettier with the Airbnb style guide for TypeScript in a React Native (Expo) project

I have been struggling with setting up linting and formatting for my React Native project for a while now. Despite following various tutorials, I still encounter setup issues.

My project consists of a Django backend and a React Native frontend. I began implementing the tutorial from https://reactnative.dev/docs/environment-setup using Expo, Yarn, and TypeScript in the src/frontend directory.

After this initial setup, I tried to integrate ESLint and Prettier into the project without making any further changes. Below are the configuration files I utilized:

  1. .eslintrc.js
/* Configuration settings for ESLint */
  1. .prettierrc.json
{ "singleQuote": true }
  1. tsconfig.json
{ "extends": "expo/tsconfig.base", "compilerOptions": {} }

Some of the errors that I am encountering include issues like import/namespace, where it indicates "';' expected" for react-native, variables being used before being defined (e.g., styles), as well as parsing error messages related to mismatched configurations between @typescript-eslint/parser and .eslintrc.js.

typescriptreact-nativeexpoeslintprettier

Answer №1

After some trial and error, I ended up creating a new file called tsconfig.eslint.json with the following configuration:

{
  "extends": "./tsconfig.json",
  "include": [".eslintrc.js", "**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
}

By adjusting the parserOptions.project setting to reference 'tsconfig.eslint.json', I was able to resolve the issue.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Building a TypeScript Rest API with efficient routing, controllers, and classes for seamless management

I have been working on transitioning a Node project to TypeScript using Express and CoreModel. In my original setup, the structure looked like this: to manage users accountRouter <- accountController <- User (Class) <- CoreModel (parent Class o ...

javascriptnode.jstypescriptapi

The contents table remains fixed in the top right corner as you scroll

I have developed an Angular app with a table-of-contents component that only displays two items. The code for the script is as follows: ts import { Component, OnInit } from '@angular/core'; import { pdfDefaultOptions } from 'ngx-extended-p ...

htmlcssangulartypescriptbootstrap-4

Is there an equivalent concept to Java's `Class<T>` in TypeScript which allows extracting the type of a class constructor?

I'm in need of a feature similar to the Class functionality in Java, but I've had no luck finding it. Class<T> is exactly what I require. I believe it could be named NewableFunction<T>. However, such an option does not exist. Using M ...

typescripttypescript-typings

What is the best way to showcase the outcome of a function on the user interface in Angular 2?

The code snippet below was originally in my .component.html file: <div class="someContainer"> <div class="text--bold">Display this please:</div> <div>{{ myObject.date ? '2 Jun' : 'Now' }}</div&g ...

angulartypescriptangular2-forms

What is the most efficient way to convert a JSON object into a URL search parameter using as few characters as possible?

Challenge: On my web app, users can adjust settings to create or edit generative artworks and then share their creations via a shortened link. The objective is to store all the data needed to replicate the artwork in the URL within 280 characters. Initia ...

jsontypescripturlcompression

I continuously encounter an issue in Vite version 3.2.4 where an error pops up stating `[vite:esbuild] The service has stopped running: write EPIPE`

When I finished creating a Vite app, I ran the command npm run dev and encountered the following error: [vite:esbuild] The service is no longer running: write EPIPE https://i.stack.imgur.com/MZuyK.png I need help solving this error. Can anyone provide gu ...

javascriptreactjstypescriptnpmvite

Issue with the react-native-autocomplete-input where the list does not close after selecting an option

After selecting an item from the list in my react-native-autocomplete-input, the list does not close. let Location = (props) => ( <View style={styles.formItem}> <Autocomplete data={props.autocompleteResults.predictions} de ...

javascriptcssreactjsreact-nativejsx

What is the best way to "connect" an interface in TypeScript?

I'm working on creating a child interface that mirrors the structure of a base interface. Any tips on how to achieve this? interface BaseInterface { api: { [key: string]: string }; ui: { [key: string]: string }; } interface ChildInterface { / ...

typescript

Is there a way to apply a decorator to a function that has been returned?

Can the following be accomplished? bar () { @custom yield () => { } } ...

typescript

Troubleshooting Image Upload Problem with Angular, Node.js, Express, and Multer

While trying to implement the functionality of uploading an image, I have been referencing various guides like how to upload image file and display using express nodejs and NodeJS Multer is not working. However, I am facing issues with getting the image to ...

node.jsangulartypescriptexpressmulter

Just a straightforward Minimum Working Example, encountering a TypeScript error TS2322 that states the object is not compatible with the type 'IntrinsicAttributes & Props & { children?: ReactNode; }'

Currently, I am immersed in a project involving React and Typescript. I am grappling with error code TS2322 and attempting to resolve it. Error: Type '{ submissionsArray: SubmissionProps[]; }' is not assignable to type 'IntrinsicAttributes ...

reactjstypescriptreact-typescript

Utilizing Firebase Cloud Functions to perform querying operations on a collection

Imagine having two main collections: one for users and another for stories. Whenever a user document is updated (specifically the values username or photoUrl), you want to mirror those changes on corresponding documents in the story collection. A sample u ...

typescriptfirebasegoogle-cloud-firestoregoogle-cloud-functions

Should front-end and back-end share Typescript data modeling through classes or interfaces?

I'm currently exploring the best approach to share the same data types between the client (React) and the server (Express + Socket.IO). Within my game, there are various rooms each storing the current status, such as: class GameRoom { players: P ...

javascriptreactjstypescriptexpress

Tips for utilizing PINO to write logs to both file and console

I have successfully implemented logging to a log file using Pino. However, I am wondering if there is a way to also log to the console in order to manage the frequency of 'console.log()' calls. Node Version : 21.6.1 Typescript Version : 5.3.3 Pi ...

typescriptpinojs

Issue with Angular not rendering data retrieved from HTTP response

In my Service script class, I have defined a HomeApiService with the following code: export class HomeApiService{ apiURL = 'http://localhost:8080/api'; constructor(private http: HttpClient) {} getProfileData():Observable<HomeModelInterface[ ...

javahtmlangulartypescriptspring-boot

Attempting to eliminate any dates that have already occurred

I am faced with an array containing various dates in string format such as "2016-08-12". My goal is to eliminate any dates that have already passed by comparing them to today's date. I am using TypeScript for this task. Here is a snippet of my datoAr ...

javascripttypescript

Tips for transferring observable to parent component in angular 2?

I have two components, SearchComponent and RuleListComponent. The Search component is a child of RuleList. https://i.stack.imgur.com/rFlM2.png I need the SearchComponent to retrieve data using APIService. This data should then be passed to RuleList as an ...

angulartypescriptangular2-components

How can I ensure that all the text is always in lowercase in my Angular project?

Is there a way to ensure that when a user enters text into an input field to search for a chip, the text is always converted to lowercase before being processed? Currently, it seems possible for a user to create multiple chips with variations in capitaliza ...

htmlangulartypescriptfilterangular-material

Retrieve a list of all file names within a designated directory using Angular

I am working on my Angular app and I need to list all the file names inside the assets folder. To achieve this, I am planning to utilize the npm library called list-files-in-dir https://www.npmjs.com/package/list-files-in-dir Here is the service impleme ...

javascriptnode.jsangulartypescript

Using *ngFor in TypeScript code

Hello there, I have a question about performing the logic of *ngFor in typescript. Is it possible to loop through data from my JSON API in the typescript file similar to how *ngFor works in HTML? Any guidance on this matter would be greatly appreciated. ...

jsonangularloopstypescript