microsoft / tslint-microsoft-contrib

A set of TSLint rules used on some Microsoft projects.
MIT License
702 stars 198 forks source link

Add an importNameRule option to ignore npm modules #541

Closed lonyele closed 5 years ago

lonyele commented 6 years ago

I've used "tslint-config-airbnb" and it uses this library. I think ImportNameRule can be useful when It checks users code, not npm installed module's code.

I recently tested with my new project setting and
import styled from "styled-components" and got tslint warning "Misnamed import. Import should be named 'styledComponents' but found styled"

I made this rule to be false, and it is all find. Just curious about this result

cyberhck commented 6 years ago

I might be way wrong here, but can't you just do, import styledComponents from "styled-components"? I thought it's just a default export, and normally in TypeScript I've mostly used something like import * as styled from "styled-components", maybe that's a way?

lonyele commented 6 years ago

I tried it import * as styled from "styled-components" because that is what I'd usually done for a react or other modules. Then I get this error message when trying to use

styled.h1` some styled-components css here `

[ts]Property 'h1' does not exist on type 'typeof import("c:/Users/roniel/Documents/LearningByExamples2/test-project-setting/node_modules/@types/styled-components/index")

`

JoshuaKGoldberg commented 6 years ago

Hey @lonyele, thanks for posting this! Agreed that it would be nice to have an option for the rule to ignore npm modules.

The import-name already allows passing an object to describe a whitelist of npm modules and their imported names:

// tslint.json
{
    "rules": {
        "import-name": [true, {
            "styled-components": "styled"
        }]
    }
}

You can try that kind of configuration until the option is added. Since the rule already takes in a general object as that mapping, maybe it should also be able to take a string "ignore-node-modules"? Example:

// tslint.json
{
    "rules": {
        "import-name": [true, "ignore-modules"]
    }
}

As for your error message, that looks like a TypeScript complaint, not TSLint. Maybe it's this? https://stackoverflow.com/questions/32236163/when-to-use-import-as-foo-versus-import-foo

lonyele commented 6 years ago

@JoshuaKGoldberg It sounds nice. I have other things to do right now so I can't make a PR(Actually, I already saw the codebase, but I couldn't really understand all of it to make a useful PR) Yeah, definitely It is in my learning list and hopefully I make a PR