Eslint configure for react - reactjs

I am using eslint in a react project, I have .jsx, .js, .test.jsx, .test.js files, I want to configure my eslintrc.json file to such that, ,it check .js and .jsx files as well as ignore .test.jsx and .test.jsx file, how may I do that ?
Thanks for the help.

You can set a .eslintignore file, to ignore certain folders and files.
Refer document: ignoring-files-and-directories
You can tell ESLint to ignore specific files and directories by creating an .eslintignore file in your project's root directory.
The .eslintignore file is a plain text file where each line is a glob pattern indicating which paths should be omitted from linting.
For example:
src/serviceWorker.ts
src/react-app-env.d.ts

Related

How can I make typescript compile only needed files?

This is an XY problem; answering any part would do.
X: I want to generate multiple bundles out of a single source tree. I'm aware of webpack supporting this, but I'm afraid, I can't use it. For example, my Router gets fed by one or more maps mapping a route (string) to a page (component). I'm storing these maps in separate files and comment importing and using them out as needed (I wrote a simple script doing this for me).
Is there a better solution?
Y: So when building the admin bundle, the user pages are not reachable from the index.tsx. Nonetheless, I'm getting typescript errors for them. The same happens even when I create a new unused file containing an error.
How can I avoid compiling unused files?
I'm not posting here all my config files as I hope, there's a simple setting for this somewhere. I'll do it when needed. Alone the list makes me depressed:
.babelrc
.env
.eslintrc
.gitignore
config-overrides.js
package.json
tsconfig.json
tslint-imports.json
This is a partial answer, but hopefully it will take you in the right direction. Typescript looks at tsconfig.json. Assuming your initiation is from an npm script, you can specify which tsconfig to use with the --project flag, like tsc --project tsconfig-1.json.
In your tsconfig.json file, only include the entry file, like
include: [
"src/app/index.ts"
]
If you have something like "src/**/*", then it will process all files. But it you specify only the entry file, then it will process only the files in that import tree. The tree is defined by the import/import() statements.
For reference: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html
If you want to create multiple bundles, then you'll need to run multiple npm scripts and have multiple tsconfig files or else specify the files from the command line.

VS Code can't see css files in intellisense

I'm building a react app but when I import a .css file, the vscode doesn't show the file in the intellisense.
I'm not sure if this is a problem with vs code or something in my webpack config.
If you think that the webpack config file is important for this problem, I can post it on the question.
Edit:
When I add a .js or .jsx file, it appears normally, but .css files don't
I don't use any extensions for the paths.
VS Code doesn't support path completion for all file types. But you should get this going with the Path Autocomplete extension.
christian-kohler.path-intellisense do works great for suggesting path completion with .css
Just disable the built-in path auto-complete function in settings
{ "typescript.suggest.paths": false }
{ "javascript.suggest.paths": false }
Use Path Intellisense Extension in vs code
https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

Can I move storybook directory to prjroot/build/storybook? (in React Native)

I'm intoroducing storybook to my React Native project.
Default storybook directory is located at the root of project as prjroot/storybook/.
But I wanna place it to prjroot/build/storybook/, because I wanna write the storybook config files in TypeScript, and build it into prjroot/build/storybook/ .
Is there any ways to make storybook recognize the moved path?
By adding the outDir option to your Typescript config.
tsconfig.json
{
"compilerOptions": {
"outDir": "build/",
...
}
}
Note that configuring the rootDirs may also be useful if you want to specify the source directories.
https://storybook.js.org/configurations/typescript-config/#tsconfigjson
EDIT: in your specific case, using react-native-storybook-loader, you have to configure it:
"prestorybook": "rnstl --outputFile ./build/storybook/storyLoader.js --pattern \"**/*.story.tsx\" --searchDir ./App"
outputFile with the new path
pattern to scan .tsx files
searchDir can be useful to ignore node_modules and prevent conflict

React Application isn't using .jsx postfix when file name includes hypens

I have the following directory structure
src
+actions
+components
+reducers
+utils
-views
-app
app-container.jsx
app.jsx
index.jsx
-more-info
index.js
more-info-container.jsx
more-info.jsx
-overview
index.jsx
overview-container.jsx
overview.jsx
Under src/views/more-info, if I try to update index.js to have the file extension index.jsx my build fails with Module build failed: Error: ENOENT: no such file or directory, open '/Users/smcclaine/Documents/Projects/ReactReduxBoilerPlate/src/views/more-info/index.js'.
If I remove the hyphen from the directory structure and the import, it will then allow me to use the .jsx extension.
Anyone have any idea how to configure my application so it will use the .jsx if the directory has a hyphen in it?
Git Repo: https://github.com/sethimcclaine/SALT

How to specify multiple matches in minimatch

I need to target specific files using minimatch (in TypeDoc exclude - I don't need tests and some other files).
I need to exclude all files from /test directory and all index.ts in all directories
Tried **/+(index.ts|**/test/*.ts) but it doesn't work.
Try **/!(test)/!(index)*.ts using globster.xyz

Resources