Sorting logic

[bilogic]

Hi,

w-48 results in
<div class="relative flex flex-row inline w-48 h-5 border border-gray-400">

w-36 results in
<div class="relative flex flex-row inline h-5 border border-gray-400 w-36">

The sorting logic seems inconsistent, making things hard to read. It's not immediately obvious there was only 1 tiny change.

Bug? Or by design? Thank you.

[darylknight]

Can replicate this. Doesn't seem to make any sense.

[hacknug]

Are you using v2 of this extension? The version on the marketplace doesn't have the latest changes so that may be where the issue comes from.

[bilogic]

Unsure, I assumed marketplace was updated. Can it be updated? Otherwise I need to figure out how to get the v2.

[hacknug]

Unsure, I assumed marketplace was updated. Can it be updated? Otherwise I need to figure out how to get the v2.

It can not be updated since the author is not around anymore. That's why @praveenperera published v2 on the issue I shared.

I personally started using eslint-plugin-tailwindcss instead since it is activelly maintained and supports all of the latest features from core.

[bilogic]

@hacknug

Cool, let me try that. Thank you for the help!

[bilogic]

@hacknug

Do you mind sharing how you use eslint-plugin-tailwindcss in VSCode?

[hacknug]

@bilogic here's the contents of my .eslintrc.js file:

const { join } = require('path')

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  parserOptions: {
    parser: '@babel/eslint-parser',
    requireConfigFile: false,
    babelOptions: {
      presets: ['@babel/preset-react'],
    },
  },
  extends: [
    '@nuxtjs',
    'plugin:nuxt/recommended',
    'plugin:tailwindcss/recommended',
  ],
  plugins: [
    'tailwindcss',
  ],
  rules: {
    'arrow-parens': ['error', 'always'],
    'comma-dangle': ['error', 'always-multiline'],
    'no-cond-assign': ['error', 'except-parens'],
    'quote-props': ['warn', 'consistent-as-needed'],

    'no-unused-expressions': 'off',
    // 'babel/no-unused-expressions': ['error', { allowShortCircuit: true, allowTernary: true }],

    'vue/attribute-hyphenation': [0],
    'vue/singleline-html-element-content-newline': [0],
    'vue/max-attributes-per-line': [0],

    'tailwindcss/no-custom-classname': ['warn', {
      config: join(process.cwd(), 'packages/frontend/tailwind.config.js'),
      cssFiles: ['**/*.css', '**/*.pcss', '!**/node_modules'],
      whitelist: ['swiper-(container|wrapper|slide)'],
      prependCustom: true,
    }],
  },
  ignorePatterns: [
    'dist',
    'storybook-static',
    'storybook',
  ],
}

On this project I'm using [email protected] and [email protected] in case some things have changed. It is the config file for a monorepo with different packages, one of them (frontend) contains my tailwindcss.config.js file.

[bilogic]

@hacknug

Pardon me, but I did tried googling and did not get far, I'm on W10

1. Installed eslint globally using npm install -g eslint, no errors
2. Installed VSCode plugin ESLint by Microsoft, no errors
3. Select the command ESLint: Create ESLint Configuration, this opened a console and ran eslint --init
4. I pressed enter to use defaults for all questions, but ended with errors

You can also run this command directly using 'npm init @eslint/config'.
npx: installed 40 in 4.716s
√ How would you like to use ESLint? · problems    
√ What type of modules does your project use? · esm
√ Which framework does your project use? · react
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser
√ What format do you want your config file to be in? · JavaScript
Local ESLint installation not found.
The config that you've selected requires the following dependencies:

eslint-plugin-react@latest eslint@latest
√ Would you like to install them now? · No / Yes
√ Which package manager do you want to use? · npm   
Installing eslint-plugin-react@latest, eslint@latest

npm WARN read-shrinkwrap This version of npm is compatible with lockfileVersion@1, but package-lock.json was generated for lockfileVersion@2. I'll try to do my best with it!
npm ERR! code EBADPLATFORM
npm ERR! notsup Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm ERR! notsup Valid OS:    darwin
npm ERR! notsup Valid Arch:  any
npm ERR! notsup Actual OS:   win32
npm ERR! notsup Actual Arch: x64

npm ERR! A complete log of this run can be found in:
npm ERR!     D:\_logs\2022-08-05T01_09_38_620Z-debug.log
A config file was generated, but the config file itself may not follow your linting rules.
Successfully created .eslintrc.js file in E:\project

5. I replaced the contents of .eslintrc.js with yours, and unsure how to proceed further here
6. I was expecting some magic to happen when I save my Laravel *.blade.php files 🤣

Thank you

[hacknug]

@bilogic maybe try creating .vscode/settings.json with this:

{
  "editor.formatOnSave": false,
  "vetur.validation.template": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

This should disable some of vscode formatting things and pass that responsability to eslint.

Here's the other related eslint deps my project uses

    "@babel/core": "7.18.6",
    "@babel/eslint-parser": "7.18.2",
    "@babel/preset-react": "7.18.6",

    "@nuxtjs/eslint-config": "10.0.0",
    "@nuxtjs/eslint-module": "3.1.0",

    "eslint": "8.19.0",
    "eslint-config-standard": "17.0.0",
    "eslint-plugin-babel": "5.3.1",
    "eslint-plugin-import": "2.26.0",
    "eslint-plugin-node": "11.1.0",
    "eslint-plugin-nuxt": "3.2.0",
    "eslint-plugin-promise": "6.0.0",
    "eslint-plugin-tailwindcss": "1.17.2",
    "eslint-plugin-vue": "9.2.0",

Keep in mind, using the exact config I shared without having the dependencies installed might be breaking eslint execution on your machine. Try to remove everything you don't need and see if you can get it to work like that. Here's what I would leave if I wasnt' using all the other stuff for my project:

const { join } = require('path')

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  extends: [
    'plugin:tailwindcss/recommended',
  ],
  plugins: [
    'tailwindcss',
  ],
  rules: {
    'tailwindcss/no-custom-classname': ['warn', {
      config: join(process.cwd(), 'packages/frontend/tailwind.config.js'),
      cssFiles: ['**/*.css', '**/*.pcss', '!**/node_modules'],
      whitelist: ['swiper-(container|wrapper|slide)'],
      prependCustom: true,
    }],
  },
}