| 1 | /**
|
|---|
| 2 | * @fileoverview Ensure proper position of the first property in JSX
|
|---|
| 3 | * @author Joachim Seminck
|
|---|
| 4 | */
|
|---|
| 5 |
|
|---|
| 6 | 'use strict';
|
|---|
| 7 |
|
|---|
| 8 | const docsUrl = require('../util/docsUrl');
|
|---|
| 9 | const report = require('../util/report');
|
|---|
| 10 | const propsUtil = require('../util/props');
|
|---|
| 11 |
|
|---|
| 12 | // ------------------------------------------------------------------------------
|
|---|
| 13 | // Rule Definition
|
|---|
| 14 | // ------------------------------------------------------------------------------
|
|---|
| 15 |
|
|---|
| 16 | const messages = {
|
|---|
| 17 | propOnNewLine: 'Property should be placed on a new line',
|
|---|
| 18 | propOnSameLine: 'Property should be placed on the same line as the component declaration',
|
|---|
| 19 | };
|
|---|
| 20 |
|
|---|
| 21 | /** @type {import('eslint').Rule.RuleModule} */
|
|---|
| 22 | module.exports = {
|
|---|
| 23 | meta: {
|
|---|
| 24 | docs: {
|
|---|
| 25 | description: 'Enforce proper position of the first property in JSX',
|
|---|
| 26 | category: 'Stylistic Issues',
|
|---|
| 27 | recommended: false,
|
|---|
| 28 | url: docsUrl('jsx-first-prop-new-line'),
|
|---|
| 29 | },
|
|---|
| 30 | fixable: 'code',
|
|---|
| 31 |
|
|---|
| 32 | messages,
|
|---|
| 33 |
|
|---|
| 34 | schema: [{
|
|---|
| 35 | enum: ['always', 'never', 'multiline', 'multiline-multiprop', 'multiprop'],
|
|---|
| 36 | }],
|
|---|
| 37 | },
|
|---|
| 38 |
|
|---|
| 39 | create(context) {
|
|---|
| 40 | const configuration = context.options[0] || 'multiline-multiprop';
|
|---|
| 41 |
|
|---|
| 42 | function isMultilineJSX(jsxNode) {
|
|---|
| 43 | return jsxNode.loc.start.line < jsxNode.loc.end.line;
|
|---|
| 44 | }
|
|---|
| 45 |
|
|---|
| 46 | return {
|
|---|
| 47 | JSXOpeningElement(node) {
|
|---|
| 48 | if (
|
|---|
| 49 | (configuration === 'multiline' && isMultilineJSX(node))
|
|---|
| 50 | || (configuration === 'multiline-multiprop' && isMultilineJSX(node) && node.attributes.length > 1)
|
|---|
| 51 | || (configuration === 'multiprop' && node.attributes.length > 1)
|
|---|
| 52 | || (configuration === 'always')
|
|---|
| 53 | ) {
|
|---|
| 54 | node.attributes.some((decl) => {
|
|---|
| 55 | if (decl.loc.start.line === node.loc.start.line) {
|
|---|
| 56 | report(context, messages.propOnNewLine, 'propOnNewLine', {
|
|---|
| 57 | node: decl,
|
|---|
| 58 | fix(fixer) {
|
|---|
| 59 | const nodeTypeArguments = propsUtil.getTypeArguments(node);
|
|---|
| 60 | return fixer.replaceTextRange([(nodeTypeArguments || node.name).range[1], decl.range[0]], '\n');
|
|---|
| 61 | },
|
|---|
| 62 | });
|
|---|
| 63 | }
|
|---|
| 64 | return true;
|
|---|
| 65 | });
|
|---|
| 66 | } else if (
|
|---|
| 67 | (configuration === 'never' && node.attributes.length > 0)
|
|---|
| 68 | || (configuration === 'multiprop' && isMultilineJSX(node) && node.attributes.length <= 1)
|
|---|
| 69 | ) {
|
|---|
| 70 | const firstNode = node.attributes[0];
|
|---|
| 71 | if (node.loc.start.line < firstNode.loc.start.line) {
|
|---|
| 72 | report(context, messages.propOnSameLine, 'propOnSameLine', {
|
|---|
| 73 | node: firstNode,
|
|---|
| 74 | fix(fixer) {
|
|---|
| 75 | return fixer.replaceTextRange([node.name.range[1], firstNode.range[0]], ' ');
|
|---|
| 76 | },
|
|---|
| 77 | });
|
|---|
| 78 | }
|
|---|
| 79 | }
|
|---|
| 80 | },
|
|---|
| 81 | };
|
|---|
| 82 | },
|
|---|
| 83 | };
|
|---|