Merge pull request #145 from microsoft/users/rbitting/prettier-eslint-setup

Set up prettier to run as an eslint rule

Author: aubreyquinn

.eslintrc.js

@@ -9,8 +9,7 @@ module.exports = {
         "eslint:recommended",
         "plugin:eslint-plugin/recommended",
         "plugin:node/recommended",
-        "prettier",
-        "plugin:eslint-plugin/recommended"
+        "plugin:prettier/recommended" // Prettier plugin must be last in the extensions
     ],
     plugins: ["header"],
     env: {
@@ -59,4 +58,3 @@ module.exports = {
     },
     ignorePatterns: ["node_modules", "dist/", "scripts"]
 };
-

.prettierrc.json

@@ -1,8 +1,8 @@
 {
     "arrowParens": "avoid",
-    "bracketSpacing": true,
-    "endOfLine": "crlf",
     "bracketSameLine": true,
+    "bracketSpacing": true,
+    "endOfLine": "auto",
     "printWidth": 140,
     "semi": true,
     "tabWidth": 4,

lib/index.ts

@@ -93,4 +93,3 @@ module.exports = {
 module.exports.processors = {
     // add your processors here
 };
-

lib/rules/accordion-item-needs-header-and-panel.ts

@@ -25,9 +25,7 @@ const rule = ESLintUtils.RuleCreator.withoutDocs({
     create(context) {
         return {
             JSXOpeningElement(node: TSESTree.JSXOpeningElement) {
-                const isAccordionItem =
-                    node.name.type === AST_NODE_TYPES.JSXIdentifier &&
-                    node.name.name === "AccordionItem";
+                const isAccordionItem = node.name.type === AST_NODE_TYPES.JSXIdentifier && node.name.name === "AccordionItem";
 
                 if (!isAccordionItem) return;
 

lib/rules/counter-badge-needs-count.ts

@@ -89,4 +89,3 @@ const rule = ESLintUtils.RuleCreator.withoutDocs({
 });
 
 export default rule;
-

lib/rules/dialogbody-needs-title-content-and-actions.ts

@@ -25,9 +25,7 @@ const rule = ESLintUtils.RuleCreator.withoutDocs({
     create(context) {
         return {
             JSXOpeningElement(node: TSESTree.JSXOpeningElement) {
-                const isDialogBody =
-                    node.name.type === AST_NODE_TYPES.JSXIdentifier &&
-                    node.name.name === "DialogBody";
+                const isDialogBody = node.name.type === AST_NODE_TYPES.JSXIdentifier && node.name.name === "DialogBody";
 
                 if (!isDialogBody) {
                     return;

lib/rules/rating-needs-name.ts

@@ -14,13 +14,14 @@ const rule = ESLintUtils.RuleCreator.withoutDocs({
     meta: {
         // possible error messages for the rule
         messages: {
-            missingAriaLabel: 'Accessibility - ratings must have an accessible name or an itemLabel that generates an aria label'
+            missingAriaLabel: "Accessibility - ratings must have an accessible name or an itemLabel that generates an aria label"
         },
         // "problem" means the rule is identifying code that either will cause an error or may cause a confusing behavior: https://eslint.org/docs/latest/developer-guide/working-with-rules
         type: "problem",
         // docs for the rule
         docs: {
-            description: "Accessibility: Ratings must have accessible labelling: name, aria-label, aria-labelledby or itemLabel which generates aria-label",
+            description:
+                "Accessibility: Ratings must have accessible labelling: name, aria-label, aria-labelledby or itemLabel which generates aria-label",
             recommended: "strict",
             url: "https://www.w3.org/TR/html-aria/" // URL to the documentation page for this rule
         },
@@ -32,9 +33,7 @@ const rule = ESLintUtils.RuleCreator.withoutDocs({
             // visitor functions for different types of nodes
             JSXOpeningElement(node: TSESTree.JSXOpeningElement) {
                 // if it is not a listed component, return
-                if (
-                    elementType(node as JSXOpeningElement) !== "Rating"
-                ) {
+                if (elementType(node as JSXOpeningElement) !== "Rating") {
                     return;
                 }
 

lib/rules/tooltip-not-recommended.ts

@@ -1,10 +1,10 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import {ESLintUtils, TSESTree} from '@typescript-eslint/utils';
+import { ESLintUtils, TSESTree } from "@typescript-eslint/utils";
 import { elementType } from "jsx-ast-utils";
 import { hasToolTipParent } from "../util/hasTooltipParent";
-import { JSXOpeningElement } from 'estree-jsx';
+import { JSXOpeningElement } from "estree-jsx";
 
 //------------------------------------------------------------------------------
 // Rule Definition
@@ -22,7 +22,7 @@ const rule = ESLintUtils.RuleCreator.withoutDocs({
         type: "suggestion", // `problem`, `suggestion`, or `layout`
         docs: {
             description: `Accessibility: Prefer text content or aria over a tooltip for these components ${allowedComponents.join(", ")}`,
-            recommended: 'strict',
+            recommended: "strict"
         },
         schema: [] // Add a schema if the rule has options
     },
@@ -50,6 +50,4 @@ const rule = ESLintUtils.RuleCreator.withoutDocs({
     }
 });
 
-
-
-export default rule;
+export default rule;

package-lock.json

@@ -71,6 +71,7 @@
         "eslint-doc-generator": "^1.7.1",
         "eslint-plugin-eslint-plugin": "^5.0.8",
         "eslint-plugin-node": "^11.1.0",
+        "eslint-plugin-prettier": "^4.2.5",
         "husky": "^9.1.6",
         "jest": "^29.7.0",
         "jscodeshift": "^17.0.0",