selaux / eslint-plugin-filenames Goto Github PK

Currently, with this setting:

"filenames/match-exported": [ 2, null, "\\.web$" ]

This code:

export default function variableName;

Is allowed if it's named:

variableName.js
variableName.web.js
variableName/index.js

But not:

variableName/index.web.js

Usually I have a variableName.js.
Then I realize I need a variableName.web.js.
Then I want to extract common code into some utils.js that are only related to them, so I make a variableName folder and move them all in, renaming to variableName/index.js and variableName/index.web.js along the way.
This is when filenames/match-exported gets upset.

I think whatever is detecting the "index" file is looking for "index.js", specifically.

Having problem with creating kebab-case matching regex.
This is how my regex looks like [a-z]+-?[a-z]+?\.?(test)?\.?js

These are my tests for regex:

error-handler.test.js
index.js
jsonrefs-resolver.test.js
swagger.test.js
tests.js
indexCC.js
indexCC_blabla.js

Error I am receiving:

Error: unknown escape sequence at line 10, column 49:
     ... tch-regex: [2, "[a-z]+-?[a-z]+?\.?(test)?\.?js", true]
                                         ^
Error
    at generateError (/home/fierycod/KNIT-homepage-back/node_modules/js-yaml/lib/js-yaml/loader.js:162:10)
    at throwError (/home/fierycod/KNIT-homepage-back/node_modules/js-yaml/lib/js-yaml/loader.js:168:9)
    at readDoubleQuotedScalar (/home/fierycod/KNIT-homepage-back/node_modules/js-yaml/lib/js-yaml/loader.js:618:9)
    at composeNode (/home/fierycod/KNIT-homepage-back/node_modules/js-yaml/lib/js-yaml/loader.js:1337:13)
    at readFlowCollection (/home/fierycod/KNIT-homepage-back/node_modules/js-yaml/lib/js-yaml/loader.js:707:5)
    at composeNode (/home/fierycod/KNIT-homepage-back/node_modules/js-yaml/lib/js-yaml/loader.js:1332:11)
    at readBlockMapping (/home/fierycod/KNIT-homepage-back/node_modules/js-yaml/lib/js-yaml/loader.js:1061:11)
    at composeNode (/home/fierycod/KNIT-homepage-back/node_modules/js-yaml/lib/js-yaml/loader.js:1331:12)
    at readBlockMapping (/home/fierycod/KNIT-homepage-back/node_modules/js-yaml/lib/js-yaml/loader.js:1061:11)
    at composeNode (/home/fierycod/KNIT-homepage-back/node_modules/js-yaml/lib/js-yaml/loader.js:1331:12)

The question is how to enable only kebab-case file naming?

Hi
@selaux, thanks for writing a great plugin.

For educational purpose,
I have made a separate eslint-plugin that provides your 'match-exported' rule (which I renamed as default-export-match-filename), with 'default-import-match-filename' rule which I got from @golopot

below is the link to my custom plugin:
https://github.com/minseoksuh/eslint-plugin-consistent-default-export-name

I made it abundantly clear in the README and in the code who the authors of the code are.

Would you mind if I publish it to npm and apply the rules to my company projects?

Thanks again

Great project, thanks a lot!

Could it possible to add a CHANGELOG to help users learn about new features and bug fixes?

should add a falg for having function name and avoid anonymous functions

myFunc.js

export default function () {}

should be

export default function myFunc() {}

The organization I work for has a rule very similar to what match-exported provides, except that we do not want exports from an index.js file to need to match the directory name.

We'd love to have something like another option to match-exported which would allow us to ask that it ignore index.js files.

When exporting with export default from an index.d.ts file (TypeScript definitions), I get an error. But the error should be ignored for index.d.ts files, just like they are ignored for index.js and index.ts files.

Basically, maybe check for this with a regex for index before the first period, and if that exists, then skip the filenames/match-exported check.

It seems to me that here:

It can therefore be something like:

return parsed.name.split('.')[0] === 'index';

Or something.

If the filename is Reddit.ts and export = class Reddit { is used, then filenames/match-regex fails, even though it's correctly named.

I found that once the exported component is wrapped in a function like connect() (from redux connect) or compose (from recompose), the match-exported rule stops working.

here's a code example:

import React from 'react';
import { connect } from 'react-redux';
import { compose } from 'recompose';

const Tabs = ({
}) => (
  <div>
  </div>
  );
export default compose(
  connect({})
)(Tabs);

I understand there's no easy way to solve this for every library out there,
but I'd propose improving exported name detection to at least support some common cases,
in general the pattern for enhacing components is that the exported name is the argument to the right-most function invocation.

export default someEnhancerFunction(...)(ExportedComponentName);

My helpers are named and exported using normal camelCase:

// helperFunction.js

const helperFunction = () {
  ...
}

export default helperFunction;

However, my React components use PascalCase:

// SomeComponent.jsx.js

class SomeComponent extends Component {
  ...
}

export default SomeComponent;

Lastly, my tests use a dual extension:

// SomeComponent.tests.js
describe('SomeComponent', function() {
  ...
});

Right now, there doesn't seem to be a way to specify multiple rules based on these file types. Any ideas on how to configure multiple styles for different parts of the same project?

Hi
I am wondering if there will be a rule to forbid certain filename pattern.

Negatives in regex is a bit hard to use, and the match-regex rule doesn't include the file extension as well.

Our company enforces the 'no-default-export' rule across the codebase.
So while there is a single export from every file, it is a non-default named export.

Is there any way to use or adapt this library to check filename against non-default export?

I imagine expanding the match-exported rule applicability to files with exactly one non-default named export, continuing to ignore files that have multiple non-default exports.

If needed, to avoid breaking changes, this could be done as a configuration switch in the rule.

Hey, awesome plugin, I see it hasn't been updated in years. It looks like it's abandoned. What the way forwards? Forking? Adding collaborators?

I wanna trigger lint error when barrel ( index ) file has .tsx extension.

Also this rule should check that files use kebab case only.

Why? tsx == component inside and barrel files are supposed to export only public api

my regex rule:

const eslintConfig = {
  rules: {
    'filenames/match-regex': ['error', '^((?!(index.tsx))[a-z][a-z-.]*[a-z])$'],
  },
};

index.tsx -> NO ERORR (WRONG ❌ )
foo-bar.tsx -> NO ERROR (✅)
FooBar.tsx -> ERROR (kebab case only) (✅)

regex is valid:
https://regexr.com/

It would be nice to have a new rule, filenames/match-imported, that is similar to filenames/match-exported but works on imports. When used together, this would prevent renaming across the module boundary.

For example:

// src/components/foo-bar.js
const FooBar = ({foo, bar}) => (
    <ul>
        <li>{foo}</li>
        <li>{bar}</li>
    </ul>
);

export default FooBar;

// src/widgets/foo-bar-widget.js (good)
import FooBar from '../components/foo-bar';

// src/widgets/foo-bar-widget.js (bad)
import FooBarComponent from '../components/foo-bar';

How can I disallow particular file names?

For example if someone calls a file MyClassStyle, it would fail because the file ends with Style. In other words - no file should end with Style.

Is it possible to do it with this plugin?

Thank you!

I would love to use this plugin with an additional flag, something like "match-exported", to force the file name to be the same as the exported object. Here is an example:

// The file has to be named File.js
export default class File {
}

// The file has to be named makeTemporary.js
export default function makeTemporary() {
}

// The file has to be named makeTemporary.js
module.exports = function makeTemporary() {
};

// The file has to be named makeTemporary.js
module.exports = makeTemporary;

If the file does not export a default named object, it the file name should follow the regexp pattern.

// The file name should follow the pattern passed as option
export class File {
}

// The file name should follow the pattern passed as option
exports.File = File;

// The file name should follow the pattern passed as option
export default {
  foo: "bar",
}

// The file name should follow the pattern passed as option
export default class {
}

What do you think about it? I could make a PR for you if you are interested.

Would be great to be able validation on certain paths, but still being able to lint them using all other eslint rules.

ESLint v8.0.0 is released 🎉

It would be awesome to have official ESLint 8 support. 👊
I'm happy to help where I can of course 🙂

Hi guys, first of all thank you very much for the plugin It has been very useful for me, the only issue that I have is when I'm trying to use something like this:

export {
  LoadDashboard,
  LoadCargaAchivoDeVentaData,
  UploadFileCargaArchivoDeVenta,
  LoadDataJob
}

I get "Filename 'DashboardService.js' does not match the naming convention filenames/match-regex"

My rules are:

"filenames/match-regex": [2, "/^([A-Z][a-z]+)+$/", true],
"filenames/match-exported": [2, "pascal"]

Do you have some hint about it?

Cheers!

The JSON convention ([2, "^[a-z_]+$", true]) is OK for those using .eslintrc and .eslintrc.json but it would be nice to have the full option names for those that prefer to yml/yaml format.

I tried this in my .eslintrc.yaml file but the match-regex rule doesn't seem to be applying correctly:

    filenames/match-regex:
        - warn
        -
            conventionRegexp: ^\w+$
            ignoreExporting: true
    filenames/match-exported: error
    filenames/no-index: error

I'm using this plugin with eslint - occasionally I need to use eslint in stdin mode (for example, the sublime plugin does this) - but this plugin fails because stdin sets the filename to <text>.

cat index.js | eslint --stdin

<text>
  1:0  error  Filename '<text>' does not match the naming convention  filenames/filenames

✖ 1 problem (1 error, 0 warnings)

The workaround for now is to amend the regexp to include <text> as a literal, e.g.

/^(<text>$|([a-z0-9]+)([A-Z][a-z0-9]+)*$)/

Ultimately it would be great if this plugin could properly detect that the input is coming from stdin and pass.

It would be nice to be able to show a custom error message where you could specify exactly which naming convention is violated.

Right now all error messages look like this:
"Filename {file} does not match the naming convention"

I'd like to see smth like this:
"Filename {file} does not match the naming convention. The required pattern is: 'yyyymmddhhmmss' "

Hey all,
Great plugin, thanks for the work!
I am using Jest to write unit tests for a class in Node.js. Was wondering how to make the linter to allow this kind of file names.

If I have a file:

packages/my-module/src/index.js

I would like to be able to configure eslint-plugin-filenames so that MyModule is a valid export from packages/my-module/src/index.js.

This is useful in monorepos, e.g. https://github.com/facebook/jest/tree/master/packages/babel-jest

It would be useful, to check JSX components using this plugin. I tried to find something similar in eslint-plugin-react, no luck.

We dont use default exports so we cant use match-exported rule.

I would like a rule to complain if yoh have:

filename: Button.tsx and it contained only:

const BigButton = () => <button>foo</button>;
export { BigButton }

but allow it if the file contained this:

const Button = () => <button>foo</button>;
export { Button }

PS. This explains alot of the reasons why we avoid default exports: https://basarat.gitbooks.io/typescript/docs/tips/defaultIsBad.html

The changes introduced in the latest (1.3.0) package release should have determined a major version bump as they 'break' the current validation.

Our build now fails as

// SomeContainer.js
import React from 'react';
import {withRouter} from 'react-router-dom';

class SomeContainer extends React.Component {
  // stuff
}

export default withRouter(SomeContainer)

now fails (as withRouter name does not match SomeContainer)

I really don't think #29 was a good idea as it's matching the name of the called function and does not consider, instead, the name of the value returned by that called function (that eslint cannot know as it would need some kind of dynamic code analysis), making this new rule quite annoying.
The rule is not even working properly as it doesn't understand chained function and because of that LUCKILY connect(mapStateToProps, mapDispatchToProps)(SomeContainer) still pass the tests.
It's my opinion that export default someAugmentingFunction(SomeContainer) is semantically clear enough and that should be considered valid by this rule.

Excluding my personal opinion, this rule had to be considered a breaking change, or, alternatively a toggle to disable the function exports name check, would have been introduced and disabled by default.

The rule should also accept the filename if it is 'index' and the parent directory name matches the regex and/or exported name. This is in compliance with the default behaviour of require to use the index file if a directory name is required/imported.

This is a great plugin for code reviewers! I mean how often does one forget to check the file name in Github?

I'm getting this error and was curious if there was a way to get around it:

design-system-react/components/accordion/panel.jsx
  8:1  error  Filename 'panel' must match the exported and transformed name 'accordion-panel'  filenames/match-exported

design-system-react/components/alert/container.jsx
  6:1  error  Filename 'container' must match the exported and transformed name 'alert-container'  filenames/match-exported

The pattern is [parent folder]-[filename] in kabob case. I don't mind PR'ing this if it's a simple pattern to match. I'd imagine the regex would go back before the last slash in the path and add that to a hyphen and the filename.

This is a feature I would personally use, but not sure if there's any demand for it from other folks or if it's better off as its own plugin.

For instance, I want all files and directories to be kebab-cased so that there are no issues between case-insensitive (OSX dev environments) and case-sensitive (Linux deployment environments). Currently, though, with this configuration:

"filenames/match-regex": [2, "^(-|[a-z])+$"],

I could create this file with no problem:

app/Components/Auth/auth-header.jsx

On my OSX machine, I could import AuthHeader from 'app/components/auth/auth-header' with no problem.

But as soon as I deploy to a linux environment... 💥

The company I work at follows a pattern where service component filenames end with "component.service.js", but the default exported component is named "componentService". I've tried using the filename replace functionality to where I strip out the last period from the filename and have it do a comparison, but because of the casing it doesn't work:
componentService --> componentservice

Any ideas how I might be able to check for this file pattern?

Currently filenames/match-exported rule is not supporting index files with suffix i.e. for rule ["error", null, "\\.react$"] this: login/index.react.js -> export default class Login {} will result in an error.
Is this a bug or by design?

{
  'filenames/match-regex': ['error', '^[a-z]+$', true]
}

This RegExp that's mean only be allowed lowercase filename, right? But it's not working.