jsx-quotes.js 2.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. /**
  2. * @fileoverview A rule to ensure consistent quotes used in jsx syntax.
  3. * @author Mathias Schreck <https://github.com/lo1tuma>
  4. */
  5. "use strict";
  6. //------------------------------------------------------------------------------
  7. // Requirements
  8. //------------------------------------------------------------------------------
  9. const astUtils = require("./utils/ast-utils");
  10. //------------------------------------------------------------------------------
  11. // Constants
  12. //------------------------------------------------------------------------------
  13. const QUOTE_SETTINGS = {
  14. "prefer-double": {
  15. quote: "\"",
  16. description: "singlequote",
  17. convert(str) {
  18. return str.replace(/'/gu, "\"");
  19. }
  20. },
  21. "prefer-single": {
  22. quote: "'",
  23. description: "doublequote",
  24. convert(str) {
  25. return str.replace(/"/gu, "'");
  26. }
  27. }
  28. };
  29. //------------------------------------------------------------------------------
  30. // Rule Definition
  31. //------------------------------------------------------------------------------
  32. /** @type {import('../shared/types').Rule} */
  33. module.exports = {
  34. meta: {
  35. type: "layout",
  36. docs: {
  37. description: "Enforce the consistent use of either double or single quotes in JSX attributes",
  38. recommended: false,
  39. url: "https://eslint.org/docs/rules/jsx-quotes"
  40. },
  41. fixable: "whitespace",
  42. schema: [
  43. {
  44. enum: ["prefer-single", "prefer-double"]
  45. }
  46. ],
  47. messages: {
  48. unexpected: "Unexpected usage of {{description}}."
  49. }
  50. },
  51. create(context) {
  52. const quoteOption = context.options[0] || "prefer-double",
  53. setting = QUOTE_SETTINGS[quoteOption];
  54. /**
  55. * Checks if the given string literal node uses the expected quotes
  56. * @param {ASTNode} node A string literal node.
  57. * @returns {boolean} Whether or not the string literal used the expected quotes.
  58. * @public
  59. */
  60. function usesExpectedQuotes(node) {
  61. return node.value.includes(setting.quote) || astUtils.isSurroundedBy(node.raw, setting.quote);
  62. }
  63. return {
  64. JSXAttribute(node) {
  65. const attributeValue = node.value;
  66. if (attributeValue && astUtils.isStringLiteral(attributeValue) && !usesExpectedQuotes(attributeValue)) {
  67. context.report({
  68. node: attributeValue,
  69. messageId: "unexpected",
  70. data: {
  71. description: setting.description
  72. },
  73. fix(fixer) {
  74. return fixer.replaceText(attributeValue, setting.convert(attributeValue.raw));
  75. }
  76. });
  77. }
  78. }
  79. };
  80. }
  81. };