Questions tagged [eslint]
JavaScript and its associated frameworks now have a versatile plug-and-play linting tool, providing comprehensive code analysis and error detection.
Currently, I am incorporating TypeScript into my project and have a GraphQL query definition that utilizes Apollo's useQuery. According to the documentation, the call should be typed, however, I am encountering an ESLint error regarding data being ass ...
Lately, I've been relying heavily on the code snippet from an answer that I requested: function sameValuesAsKeys<K extends string>(...values: K[]): {readonly [P in K]: P} { const ret = {} as {[P in K]: P} values.forEach(k => ret[k] = k); ...
The property named "overrides" has the incorrect type (expected array but received {"files":["**/*.ts","**/*.tsx"],"parser":"@typescript-eslint/parser","parserOptions":{"ecmaVersion":2018,"sourceType":"module","ecmaFeatures":{"jsx":true},"warnOnUnsupported ...
I'm currently working on an Express app that features a custom error handler. The code for the error handler is as follows: app.use((err: Error, _req: express.Request, res: express.Response) => { console.log(err) // ...send back a well formatted JS ...
Update I made some changes to the .eslintc file in my client app's root directory. I added a JS Object with an "extends" attribute defined as "react-app" and included the "prettier" plugin in the "plugins" array. { "extends": "react-app", "plugi ...
I have a question about my configuration in vue.config.js. I've tried setting it as follows: module.exports = { lintOnSave: false } However, the changes don't seem to take effect. Can anyone provide guidance on how to disable eslint validation in a Vu ...
Looking to implement a new linter rule that verifies the sequence of tags: <script>, <template>, and <style>. By default, Vue places <template> first, but I believe <script> should come first as it holds more importance. It w ...
Recently entering the realm of Vue, I'm in the process of achieving pristine eslint-plugin-vue outcomes on a trial project. However, when inspecting the test file named Home.vue displayed below, an alert is triggered: The "HelloWorld" component h ...
ESLint is throwing an error message that says: ESLint: Unable to resolve path to module '@vercel/analytics/react'.(import/no-unresolved) The issue arises in this line of code: import { Analytics } from '@vercel/analytics/react'; This error occurred while ...
Currently, I am following a tutorial on Ionic/Vue 3 which can be found here. However, when I try to serve the project, I encounter the following error: https://i.stack.imgur.com/k4juO.png It appears that my project-level .eslintrc.js file is not being ap ...
Whenever my .eslint.js file includes this rule: "vue/script-indent": [ "error", 4, { "baseIndent": 1, "switchCase": 1, } ] and I save it, an error pops up: Error: Expected indentation of 32 spaces but only found 24 spaces ...
Let's consider an inspiring scenario: I am in the process of coding and need to troubleshoot an issue, so here is a snippet of my code: function foo() { console.log("I'm resorting to printf debugging in 2016"); } However, our build setup involves esL ...
I am currently working on a project that involves Next.js, TypeScript, and Chakra UI. While configuring Button themes in the button.ts file, I encountered an error related to the baseStyle object for properties like borderRadius, color, and border: Type ' ...
I possess an assortment of keys that I desire to sort in alphabetical order whenever I execute eslint --fix/prettier. My inference is that such a feature does not exist by default due to its potential impact on the code's behavior. Therefore, my query per ...
After successfully running eslint with the provided .eslintrc file, I encountered an issue when making a simple change to use 'standard' instead of 'airbnb-base' as the extend: module.exports = { root: true, parser: 'babel-esl ...
I'm trying to figure out how to disable the "no-unused-vars" rule specifically for TypeScript interfaces. Here's a code snippet where I'm getting a warning: export type IKeoTableColumn<T> = { id: T; align: 'left' | 'center' | 'right'; label: st ...
Can someone guide me on what to include in my .eslintrc file for my specific situation? Link 1 Link 2 If I disable this rule, I encounter the following error: import path from "path"; // ESLint: Prefer `node:path` over `path`.(unicorn ...
screenshot I encountered an issue where I couldn't locate the Airbnb typescript option in React JS (Next JS) within ESLint. Prior to this, I had installed Storybook and mistakenly clicked "yes" when prompted to migrate ESLint to Storybook. ...
Recently, after an update to the yup dependency in my create react-app project, I noticed that it stopped launching errors for invalid imports. Previously, I would receive the error "module filename has no exported member X" when running react-scripts buil ...
In my Vue web application, I have enabled ESLint and encountered an issue with the following code: myApi.get('products/12').then((prodResponse) => { state.commit('ADD_PRODUCT', {product: prodResponse.data}) }, error => { console.log('Inside erro ...
I am currently encountering an issue while running my code. eslint server.js The following error occurred: 17:24 error There is a problem resolving the path to module './routes' import/no-unresolved goran@goran-HP-pic-8560p:~/blog_mongo/backend$ pwd ...
Within my child React component, I receive an itemList prop from the parent component. This prop is an array of objects that contain data fetched from an endpoint. My goal in the child component is to enhance each object in the itemList array by adding mo ...
const checkAuthorization = function(request, response, next) { const token = request.headers.authorization; if (!token) { return response.status(401).json({ message: 'Invalid or missing token' }); } const accessToken = token.split(&a ...
I am completely new to typescript. Currently, I'm working on a project that has a lot of pre-configured react components in JavaScript files (.js). My task now is to convert everything to TypeScript (.tsx) without triggering any ESLint errors. Unfort ...
One day, while working on one of my Vue projects, I noticed that Eslint started causing build issues by flagging errors such as "Strings must use singlequote" or "Variable declared but never used". Surprisingly, the formatting errors were not being automat ...
Is there a way to activate eslint within the Laravel vendor folder? Our primary development work is done within the vendor folder of our project, which relies on Laravel packages. I have successfully set up and configured eslint at the root level of the p ...
Currently, I am utilizing VSCode with ESlint for Typescript development. I'm curious about how to turn off or remove the yellow curled error lines in my code editor, like the ones displayed in this example image: https://i.stack.imgur.com/Zdtza.png My mai ...
On the official ESLint website, there is a section titled Per-rule Performance. It explains that "setting the TIMING environment variable will prompt the display of the ten longest-running rules upon linting completion, showing their individual runn ...
Here is the organization of my files and directories. https://i.stack.imgur.com/YWNw3.png I am looking to set up some eslint rules for my code detection. In my .eslintrc file, I have included these configuration settings. { "extends": "airbnb", "ru ...
When using the forEach method within a function in JavaScript, I encountered a code compilation failure with the following error: Expected an assignment or function call and instead saw an expression no-unused-expressions. This error occurs for both ins ...
My JavaScript function looks like this: export default () => ({ root: css` background-color: hotpink; margin-bottom: 1.45rem; `, }); However, ESLint is raising a complaint: Missing return type on function.eslint@typescript-eslint/explicit-m ...
My .eslintrc file is very simple: { "extends": [ "twilio" ] } However, when I run eslint, I encounter this error message: The config "standard" was referenced from the config file in "/Users/MyAccount/Projects/my-sample-app/node_modules/cipher ...
I am currently working on a sample application using Vue 3 and Typescript. Specifically, I have opted for the new Vue v3.2 setup option within the section of the Vue SFC. Following the guidance from the Vue documentation, I included "vue/setup-compiler-ma ...
When using $localize, eslint detects errors and returns two specific ones: Unsafe assignment of an 'any' value and Unsafe any typed template tag. It's quite strange that I seem to be the only one facing this issue while working on the project. Even on bot ...
I am currently working on my application and utilizing React Context with the setState function. const userContext = React.createContext([{ user: {} }, () => {}]); const userHook = useState({ user: {} }); <userContext.Provider value={userHook}> / ...
Within our current project, the tslint rule jsx-no-lambda is in place. When attempting to capture event from onSubmit, this is how I typically write my code: public handleLogin = (event: React.FormEvent<HTMLFormElement>) => { event.preventDe ...
When working in TypeScript 3.9.7, the compiler is not concerned with the following code: const someFn: () => void = () => 123; After stumbling upon this answer, it became apparent that this behavior is intentional. The rationale behind it makes sens ...
Interestingly, the Vue.js documentation strongly recommends using the <script setup> syntax of the Composition API. The issue with this recommendation is that the documentation lacks depth and it conflicts with other tools (like eslint). Here is an e ...
Today, I encountered several errors after updating my node_modules and Vue to v3.3. The project utilizes Vue 3.3, WebPack (not Vite), and VS Code Volar. It is a large project. In every file with *.vue containing <script setup lang="ts">, ...
Context In a basic ReactJS project, I aimed to enhance its functionality by incorporating ESLint capabilities: npm install --save-dev eslint-config-react-app eslint@^8.0.0 Here is the modified package.json after integrating ESLint: { "name": ...
I'm currently working on developing a loader for my static grid. I've incorporated the react-shimmer-skeleton package source code, but I'm encountering issues with eslint in strict mode. You can find the respective repository file by followi ...
I am looking to prevent direct imports from the root of a specific dependency (@material-ui/icons) in my application and ensure effective tree-shaking. Allowed - import AccessAlarmIcon from "@material-ui/icons/AccessAlarm"; Not Allowed - imp ...
Recently, I noticed that ESLint errors are no longer appearing on the browser screen while I develop my Next.js (v14) app. Despite having several ESLint rules in place, they do not display on the screen like they did when using CRA. I prefer it when the a ...
Encountering a warning in the console stating "[intlify] Detected HTML in .....", yet unable to find a way to disable this specific warning for the mentioned line. Attempts were made to modify the eslintrc.js file to deactivate all v-html warnings, but unf ...
I started a fresh project in Angular 13 and configured typescript-eslint by running the command below: ng add @angular-eslint/schematic I made changes to my .eslintrc.json file where I disabled the rules for "typescript-eslint/typedef" and "typescript-esl ...
I have files named .eslintignore and eslintrc.js in close proximity. The contents of my ignore file are as follows: .eslintrc.js dist/* node_modules/* out-tsc/* However, when I access the eslintrc.js file, an error is triggered: Parsing error: ESLint was ...
After using vue ui to build my project, here is the content of my package.json: "@vue/cli-plugin-eslint": "^4.1.0", "@vue/cli-plugin-typescript": "^4.1.0", "@vue/eslint-config-standard": "^4.0.0", "@vue/eslint-config-typescript": "^4.0.0", "eslint": "^5.1 ...
While attempting to run ESLint on Visual Studio 2019, everything goes smoothly until I add eslint-plugin-prettier to my package.json file. At that point, an error arises. internal-error | (ESLint) Failed to load plugin prettier: Cannot find module 'esli ...
Can anyone help me with writing a script for the stories extensions as well? Below is what I currently have: "eslint": "eslint '**/{*,*.stories}.{ts,tsx}'", Here's my project structure: src components SomeComponen ...
How can I enforce a specific naming structure for folders and subfolders? I not only want to control the styling of the names (kebab, camel), but also the actual names of the folders and files themselves. For example, consider the following paths: ./src/ ...
I received the JSON response shown below. To validate the _place, I used responseData.search[0].edges[0].node._place { "data": { "search": [ { "_place": "SearchResultItemConnection", "edges": [ { "cursor": ...
We initially utilized tslint in our project but recently made the switch to eslint. When I execute the command "eslint "packages/**/*.{ts,tsx}"" on my personal Windows machine, it detects 1 error and 409 warnings. Surprisingly, when r ...
I am encountering an EsLint error indicating that "className is not a TailwindCSS class" after incorporating custom classes like colors into my tailwind.config.js file. Despite this, I am unsure about how to resolve this issue. Shouldn't EsLint recogn ...
I am in the process of creating a Notes.ts file specifically for TypeScript notes. I require syntax highlighting but do not want to use eslint. How can I prevent eslint from running on my notes file? Directory Structure root/.eslintignore root/NestJS.ts r ...
Recently, I began working on a Next.js application and successfully configured eslint to ensure code quality. Here is the list of dev dependencies for my Next.js app: "devDependencies": { "babel-eslint": "^10.1.0", &qu ...
In my current NextJS project which is in typescript, I have the following configuration in my .eslintrc.json: { "extends": "next/core-web-vitals" } Now, I want to include additional typescript rules, such as enforcing the rule of n ...
I recently created a project using Vue-cli and decided to include a lint configuration by default. However, I am encountering an issue when running the lint command: error: Unable to resolve path to module '@/components/HelloWorld.vue' (import ...
Is there a way to use eslint to make it mandatory for JavaScript/TypeScript files to have a named export of a specific name? For instance, in the src/pages folder, I want all files to necessitate an export named config: Example of incorrect usage src/page ...
I recently incorporated eslint and prettier into my existing CSR react project, but when I ran 'npm run prettier' I encountered the following errors. How can I resolve this error? Just so you know, there is a src/App.tsx file contrary to the err ...
https://www.youtube.com/watch?v=Fa4cRMaTDUI I am currently following a tutorial and attempting to replicate everything the author is doing. At 19:00 into the video, he sets up a project using vue.js and express.js. He begins by creating a folder named &apo ...
Seeking assistance with react's forwardRef feature. Currently encountering errors related to missing props validation in FadeContents. Is there a way to resolve this issue? It seems like the props need to be defined somewhere in order to be used within t ...
I recently started using eslint and I'm in the process of updating my code to comply with my eslint configuration. module.exports = { env: { browser: true, commonjs: true, node: true, es2021: true, }, extends: 'eslint:recommended', ...
I am currently facing an issue with exporting data from a DataTable in PrimeReact. The onClick function for the Button does not allow async callbacks as flagged by eslint. Can someone guide me on how to properly call this function? const exportCSV = us ...
I've come across an interesting issue where I'm creating a handler function and trying to set the current ref to the state's value plus 1: const useTimer = () => { const [seconds, setSeconds] = useState(0); const counterRef = useRef(n ...
While developing a website using React, I encountered an error that said useState is defined but never used in the navbar component. To address this, I made changes to my ESLint configuration in the package.json file: "rules": { "eqeqe ...
Encountering an issue with committing changes to a file due to a failed pre-commit eslint --fix task, displaying the following errors: × eslint --fix: C:Usersusersource eposprojectproject-frontendsrccomponentsHeader.tsx 654:61 error Visible, ...
After upgrading Nuxt in my project using the command npx nuxi upgrade, I encountered an issue while running eslint .. The output displayed a warning regarding the TypeScript version: ============= WARNING: You are currently running a version of TypeScript ...
Overview I am currently working with NestJS and @nestjs/graphql, using default eslint and prettier settings. However, I encountered some issues when creating a graphql resolver. Challenge Prettier is showing the following error: Replace returns with (r ...
After receiving a Vue.js project from GitHub, I attempted to download and run it. However, when I tried the command npm run serve, I encountered an error message: Syntax Error: Error: No ESLint configuration found in C:\Users\User\Desktop&bs ...
I found a frontend template online and successfully installed all the packages using yarn. However, although I have an .eslint.json file in place and the ESLint extension is installed in Visual Studio Code, I am not seeing any linting errors. Below is the ...
Trying to retrieve data from a URL using Axios in my Vue app is resulting in the error message: Error: Arrow function should not return assignment Complete error message: Error: Arrow function should not return assignment (no-return-assign) at src\co ...
I'm facing an issue with the following code snippet: function (flavors: IceCreamFlavor): 'like'|'dislike' { switch (flavors) { case IceCreamFlavor.vanilla: return 'dislike'; case IceCreamFl ...
In the project I am currently working on, we have implemented a warning for typescript-eslint/consistent-type-assertions with specific options set to { assertionStyle: 'as', objectLiteralTypeAssertions: 'never' }. While I generally appreciate its recommend ...
Recently, as I began deploying to Vercel, an issue arose where I needed to constantly check for errors during the build process. Strict TypeScript errors and messages like "Can't use <img> tag, please use next/image" kept cropping up after each ...
I encountered an eslint error while attempting to commit the branch 147:14 error Expected an assignment or function call and instead saw an expression @typescript-eslint/no-unused-expressions I'm struggling to identify the issue in the code, even ...