Please add an option to add stylelint when creating a new workspace

ofirrifo commented 3 years ago

Description

It would be nice if you added stylelint when I'm created a new workspace. It can be configured respectively to the Default stylesheet format user chose.

Motivation

Just like any other linter (tslint, eslint, etc...) it be appreciated to add css, scss linter which helps you avoid errors and enforce conventions in your styles .

Suggested Implementation

While execute the npx create-nx-workspace@latest to create a new workspace I need to select a Default stylesheet. after I selected it you can install the relevant npm packages of the stylelint. and add the config file in the root directory. For Example: User selecte scss Default stylesheet: -npm i --D stylelint stylelint-config-standard stylelint-config-sass-guidelines

create a new file .stylelintrc in the root directory

developer239 commented 3 years ago

@ofirrifo Is there a way to run tslint as efficiently as eslint? (only on affected files?) And I am not talking about lint-staged. 🙂

ofirrifo commented 3 years ago

@developer239 we are talking about stylelint and not tslint

developer239 commented 3 years ago

@ofirrifo Sorry that was a typo of course I meant stylelint. 🙂

Phillip9587 commented 3 years ago

@ofirrifo @vsavkin @developer239 I added a plugin to support stylelint in nx workspaces. Please give it a try: https://github.com/Phillip9587/nx-stylelint

Lonli-Lokli commented 3 years ago

@Phillip9587 I believe your generator is for angular only, right? As it does not provide options for styled-components for example

Phillip9587 commented 3 years ago

@Lonli-Lokli The nx-stylelint:configuration generator has currently no option to add css-in-js syntax. But you can add .js files to the lintFilePatterns of the executor configuration in your workspace.json or project.json to lint your styled-components.

Example:

...
"stylelint": {
    "executor": "nx-stylelint:lint",
    "options": {
        "config": "apps/test/.stylelintrc.json",
        "lintFilePatterns": [
             "apps/test/**/*.css", 
             "apps/test/**/*.scss",
             "apps/test/**/*.js"
         ]
     }
}
...

Lonli-Lokli commented 2 years ago

Does it work with new NX project.json?

I think it make sense to integrate it with Nx ecosystem to make it available with any new library or app

Phillip9587 commented 2 years ago

@Lonli-Lokli Of course it works with the new project.json files.

You can add a stylelint configuration to every project in your Nx monorepo with the help of the provided generators. You have to configure stylelint with the help of the .stylelintrc.json files similar to your ESLint configuration. nx-stylelint only wraps stylelint and provides an Nx executor to run it. It also makes caching of the linting result possible. In my opinion it completely integrates with the Nx ecosystem.

I am currently working on the stylelint 14 support for nx-stylelint. Stylelint 14 is a massive change for the stylelint ecosystem. The automatic inferral of the syntax was removed. So after the update you have to configure stylelint more explicit. See https://stylelint.io/migration-guide/to-14

@Phillip9587 I believe your generator is for angular only, right? As it does not provide options for styled-components for example

As soon as stylelint 14 is supported by nx-stylelint you can configure stylelint to lint styled components. See https://stylelint.io/migration-guide/to-14#syntax-option-and-automatic-inferral-of-syntax

github-actions[bot] commented 2 years ago

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs. If we missed this issue please reply to keep it active. Thanks for being a part of the Nx community! 🙏

github-actions[bot] commented 1 year ago

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.

nrwl / nx