selaux / eslint-plugin-filenames Goto Github PK
View Code? Open in Web Editor NEWEslint plugin to check filenames.
Eslint plugin to check filenames.
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?
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... ๐ฅ
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' "
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.
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.
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.
If the filename is Reddit.ts
and export = class Reddit {
is used, then filenames/match-regex
fails, even though it's correctly named.
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.
Would be great to be able validation on certain paths, but still being able to lint them using all other eslint rules.
It would be nice to have a new rule, filenames/match-imported
, that is similar to filenames/match-exported
but works on import
s. 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';
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?
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.
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
It would be useful, to check JSX components using this plugin. I tried to find something similar in eslint-plugin-react, no luck.
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?
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!
Great project, thanks a lot!
Could it possible to add a CHANGELOG
to help users learn about new features and bug fixes?
{
'filenames/match-regex': ['error', '^[a-z]+$', true]
}
This RegExp that's mean only be allowed lowercase filename, right? But it's not working.
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
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.
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?
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 ๐
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?
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.
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.
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.
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.
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
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/
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
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);
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.
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!
should add a falg for having function name and avoid anonymous functions
myFunc.js
export default function () {}
should be
export default function myFunc() {}
In Eslint 9 meta.schema is required.
Please add meta.schema to rules configs.
Also context.getFilename() now is property context.filename.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.