In my Typescript React project, I defined:
export type NavState = { mounted: boolean }
and then in my component I used theme like:
import { NavState } from '../../models/nav'
class Nav extends React.Component<any, NavState> {
state: NavState = {
mounted: false
}
}
but I got red underline for NavState in my import and it says:
'NavState' is defined but never used. (no-unused-vars)standard(no-unused-vars)
In my package.json I have this:
"standard": {
"ignore": [
"node_modules/**",
"**/__generated__/"
],
"parser": "#typescript-eslint/parser",
"plugins": [
"#typescript-eslint"
]
}
and my vs-code settings.json is like this:
{
"standard.autoFixOnSave": true,
"standard.enable": true,
"standard.run": "onType",
"standard.validate": [
{ "language": "javascript", "autoFix": true },
{ "language": "javascriptreact", "autoFix": true },
{ "language": "typescript", "autoFix": true },
{ "language": "typescriptreact", "autoFix": true }
]
}
Why Standardjs can't understand that I used a type alias? and how can I fix it?
This should do the trick:
import { NavState } from '../../models/nav' //eslint-disable-line
Notice the comment on the import line.
Check the docs for more.
Related
I'm creating project with nx, and also use nx preset to setup the project,and I tried to add some ready-to-go UI lib, adding tailwind first, then adding 'daisyui' the tailwind components. But I got the issue that seems macro can't find daisyui class. for normal tailwind class it's working properly.
if you need more context and file config that I'm missing to show here, please tell me. thankyou for all your helps.
Error:
ERROR in ./src/app/app.tsx
Module build failed (from ../../node_modules/#nrwl/web/src/utils/web-babel-loader.js):
MacroError: path/on/my/machine/mono-repo/apps/appname/src/app/app.tsx:
✕ btn was not found
btn is button className on daisyui component.
How I use twin macro
import styled from "#emotion/styled"
import tw from "twin.macro"
...
const StyledButton = styled.button`
${tw`btn btn-primary`}
`
.babelrc
{
"presets": [
[
"#nrwl/react/babel",
{
"runtime": "automatic",
"targets": {
"browsers": [">0.25%", "not dead"]
}
}
],
"#emotion/babel-preset-css-prop",
"#babel/preset-typescript"
],
"plugins": [
"babel-plugin-transform-inline-environment-variables",
["babel-plugin-twin", { "debug": true }],
"babel-plugin-macros",
[
"#emotion/babel-plugin-jsx-pragmatic",
{
"export": "jsx",
"import": "__cssprop",
"module": "#emotion/react"
}
],
[
"#babel/plugin-transform-react-jsx",
{
"pragma": "__cssprop",
"pragmaFrag": "React.Fragment"
}
]
]
}
and project.json setup config
{
"root": "apps/appname",
"sourceRoot": "apps/appname/src",
"projectType": "application",
"targets": {
"build": {
"executor": "#nrwl/web:webpack",
"outputs": ["{options.outputPath}"],
"defaultConfiguration": "production",
"options": {
"compiler": "babel",
....others config ....
"styles": ["apps/sandbox/src/styles.scss"],
"scripts": [],
"webpackConfig": "apps/sandbox/webpackConfig.js"
},
...
}
...
}
my webpackConfig.js
const webpack = require("webpack")
const nrwlConfig = require("#nrwl/react/plugins/webpack.js")
const webpackTailwindConfig = require("./webpack-tailwind.config")
module.exports = (config, env) => {
config = nrwlConfig(config)
return {
...config,
...other config ..
module: {
...config.module,
rules: [...config.module.rules, webpackTailwindConfig.tailwindWebpackRule]
},
node: { ...config.node, global: true }
}
}
webpack-tailwind.config
const tailwindWebpackRule = {
test: /\.scss$/,
loader: "postcss-loader"
}
exports.tailwindWebpackRule = tailwindWebpackRule
and style.scss that import all tailwind
#import "tailwindcss/base";
#import "tailwindcss/components";
#import "tailwindcss/utilities";
I am trying to update my project's configuration to sort the import order. I'm using create-react-app, and have been following the instructions in this article. Here's what I've done so far:
Run yarn add eslint-plugin-import -D.
Added a .eslintrc.js in src folder of my application.
Added the following configuration as mentioned in the article:
module.exports = {
extends: "react-app",
plugins: ["eslint-plugin-import"],
"import/order": [
"error",
{
groups: ["builtin", "external", "internal"],
pathGroups: [
{
pattern: "react",
group: "external",
position: "before",
},
],
pathGroupsExcludedImportTypes: ["react"],
"newlines-between": "always",
alphabetize: {
order: "asc",
caseInsensitive: true,
},
},
],
};
I've written the following sample component and changed the order of import statements to check if this is working, but when I save the order is not being updated:
Sample.js
import { PropTypes } from "prop-types";
import React from "react";
const Sample = () => <div>Hello</div>;
export default Sample;
Expected after saving
Sample.js
import React from "react";
import { PropTypes } from "prop-types";
const Sample = () => <div>Hello</div>;
export default Sample;
I also tried simple-import-sort, but I don't know how to configure it. How can I configure my project so that import statements are automatically kept in order?
in pathGroups change react to be built, not external:
"pathGroups": [
{
"group": "builtin",
"pattern": "react",
"position": "before"
},
{
"group": "external",
"pattern": "#/**",
"position": "before"
}]
I have really simple exaple in react
export default class App extends Component{
state={
count:0
}
I have a ESLint error under state={....:
Parsing error: Unexpected token = eslint
I don't know why... do I have to install ESLint-react plugin?
this my eslintrc.js:
module.exports = {
env: {
browser: true,
es6: true
},
extends: [
'standard'
],
globals: {
Atomics: 'readonly',
SharedArrayBuffer: 'readonly'
},
parserOptions: {
ecmaFeatures: {
jsx: true
},
ecmaVersion: 2018,
sourceType: 'module'
},
plugins: [
'react'
],
rules: {
}
}
I am using JEST and Enzyme. In my eslint file I have added jest as true under env. But I get a lint error for shallow as I have included it globally. Error is- error 'shallow' is not defined no-undef
setupTests.js
//as we are accessing our application with a http://localhost prefix, we need to update our jest configuration
import { shallow, render, mount, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
// React 16 Enzyme adapter
configure({ adapter: new Adapter() });
// Make Enzyme functions available in all test files without importing
global.shallow = shallow;
global.render = render;
global.mount = mount;
.eslintrc
{
parser: "babel-eslint",
"extends": ["airbnb"],
"env": {
"browser": true,
"jest": true
},
"rules": {
"max-len": [1, 200, 2, {ignoreComments: true}],
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
"no-underscore-dangle": [0, { "allow": [] }],
"jsx-a11y/label-has-associated-control": [
"error", {
"required": {
"every": [ "id" ]
}
}
],
"jsx-a11y/label-has-for": [
"error", {
"required": {
"every": [ "id" ]
}
}
]
}
}
app.test.js
import React from 'react';
import { LoginFormComponent } from '../../components';
describe('LoginForm', () => {
const loginform = shallow(<LoginFormComponent />);
it('renders correctly', () => {
expect(loginform).toMatchSnapshot();
});
});
package.json
"scripts": {
"dev": "webpack-dev-server --historyApiFallback true --port 8888 --content-base build/",
"test": "jest",
"lint": "eslint ./src",
"lintfix": "eslint ./src --fix"
},
"jest": {
"verbose": true,
"testURL": "http://localhost/",
"transform": {
"^.+\\.js$": "babel-jest"
},
"setupFiles": [
"./setupTests.js"
],
"snapshotSerializers": [
"enzyme-to-json/serializer"
]
},
The error comes in my app.test.js where I am trying to use shallow. Do I have to add something in my eslint config for enzyme the way I have made jest as true?
How about add global statement? eslint no-undef docs
/*global someFunction b:true*/
/*eslint no-undef: "error"*/
var a = someFunction();
b = 10;
or set global on .eslintrc (eslint global)
{
"globals": {
"shallow": true,
"render": true,
"mount": true
}
}
Updated .eslintrc
{
parser: "babel-eslint",
"extends": ["airbnb"],
"env": {
"browser": true,
"jest": true
},
"globals": {
"shallow": true
},
"rules": {
"max-len": [1, 200, 2, {ignoreComments: true}],
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
"no-underscore-dangle": [0, { "allow": [] }],
"jsx-a11y/label-has-associated-control": [
"error", {
"required": {
"every": [ "id" ]
}
}
],
"jsx-a11y/label-has-for": [
"error", {
"required": {
"every": [ "id" ]
}
}
]
}
}
Since globals are only used in test files the best practise is not to set them globally but only for the test files. That can be done by using overrides property with proper files glob:
overrides: [
{
files: "*.test.js",
globals: {
shallow: true,
render: true,
mount: true,
},
},
],
Full .eslintrc after addition in the snippet.
{
"parser": "babel-eslint",
"extends": ["airbnb"],
"env": {
"browser": true,
"jest": true
},
"rules": {
"max-len": [1, 200, 2, { "ignoreComments": true }],
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
"no-underscore-dangle": [0, { "allow": [] }],
"jsx-a11y/label-has-associated-control": [
"error",
{
"required": {
"every": ["id"]
}
}
],
"jsx-a11y/label-has-for": [
"error",
{
"required": {
"every": ["id"]
}
}
]
},
"overrides": [
{
"files": "*.test.js",
"globals": {
"shallow": true,
"render": true,
"mount": true
}
}
]
}
I'm doing a test app with Ionic2 / Cordova / Typescript / Angular.
I'm using tslint 5.6.0.
I'm using the following module:
https://www.npmjs.com/package/tslint
Focusing on just one file...
when linting the following file:
import { NgModule, ErrorHandler } from "#angular/core";
import { BrowserModule } from "#angular/platform-browser";
import { IonicApp, IonicModule, IonicErrorHandler } from "ionic-angular";
import { MyApp } from "./app.component";
import { AboutPage } from "../pages/about/about";
import { ContactPage } from "../pages/contact/contact";
import { HomePage } from "../pages/home/home";
import { TabsPage } from "../pages/tabs/tabs";
import { StatusBar } from "#ionic-native/status-bar";
import { SplashScreen } from "#ionic-native/splash-screen";
#NgModule( {
declarations: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage,
],
imports: [
BrowserModule,
IonicModule.forRoot( MyApp ),
],
bootstrap: [ IonicApp ],
entryComponents: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage,
],
providers: [
StatusBar,
SplashScreen,
{ provide: ErrorHandler, useClass: IonicErrorHandler },
],
})
export class AppModule { }
I get:
The key 'bootstrap' is not sorted alphabetically
RuleFailurePosition { position: 790, lineAndCharacter: { line: 25, character: 4 } }
RuleFailurePosition { position: 799, lineAndCharacter: { line: 25, character: 13 } }
I'm using the following options:
{
"extends": "tslint:recommended",
"rules": {
"no-duplicate-variable": true,
"max-line-length": {
"options": [120]
},
"ordered-imports": false,
"new-parens": true,
"no-arg": true,
"no-bitwise": true,
"no-conditional-assignment": true,
"no-consecutive-blank-lines": false,
"no-console": {
"options": [
"debug",
"info",
"log",
"time",
"timeEnd",
"trace"
]
}
},
"jsRules": {
"max-line-length": {
"options": [120]
}
}
}
What option do I need to configure on TSLint to prevent showing up this error?
The rule failing here seems to be object-literal-sort-keys.
You should be able to disable it in the rules section of your config file by adding:
"object-literal-sort-keys": false
You can find all the tslint rules here.
For anyone coming here who is doing a migration to TypeScript from javascript, or who simply has a mixed codebase of javascript + typescriptm you may to define this rule inside 'jsRules' as well, i.e. to get rid of this error, when you having console statements defined inside javascript (not typescript files).
//tslint.json
{
"extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
"rules": {
"object-literal-sort-keys": false //Disable for typescript
},
"jsRules": {
"object-literal-sort-keys": false //Disable for javascript
}
}