SharePoint Framework (SPFx) v1.15 - The Attack of ESLint!
In the latest release of the #SharePoint Framework, v1.15, Microsoft ditched #TSLint in favor of #ESLint. While this is a big improvement and a step in the right direction, I think Microsoft went overboard as they added a ton of additional linting rules we didn't have to deal with before.
The point of this video is to see how to cope with some common ESLint rules you'll likely encounter when migrating your existing #SPFx v1.14 projects to SPFx v1.15. I'll show you how to understand what a linting error is telling you, how to change your code, or how to ignore the rule in your projects.
But… there's one more thing I want to do during this video.
As I said, I think Microsoft went overboard with these rules with ESLint. While I like ESLint, what I don't like is every single default project I create now with SPFx (or any tool for that matter) now imposes coding rules on me that are entirely subjective.
I'd prefer if the rules they did include were scaled back and minimal, and let me add the rules I want to add for my organization's coding standards. Right now, you have to either change how you like to write your code and your standard practices, or you have to edit every project you create to change the default rules.
I don't like this… so… this will be my opinionated "how to use ESLint in your SPFx projects".
This video is also available as a blog post and our podcast as episode 24 via the following links:
📜 https://www.voitanos.io/blog/sharepoi...
🎙 https://www.voitanos.io/podcast
📚 Additional Resources:
----------------------------------------
🔗 ESLint: https://eslint.org/
🔗 CLI for M365 - update defailt .eslintrc.js: https://github.com/pnp/cli-microsoft3...
🔗 React, Inline Functions, and Performance: / react-inline-functions-and-performance
🔗 sharepoint/sp-dev-docs/discussions#8290: https://github.com/SharePoint/sp-dev-...
🎧 Chapters
-------------------------------------------
00:00 : Introduction
04:38 : Pre SPFx v1.14 project - no linting issues
06:36 : Default linting issues with SPFx v1.15 projects
11:29 : Trigger ESLint issues with a build
12:15 : Options for disabling ESLint rules
14:03 : ESLint rule: no-explicit-any
15:33 : ESLint rule: consistent-type-assertions
17:11 : ESLint rule: explicit-member-accessibility
18:05 : ESLint rule: typedef
18:09 : ESLint rule: no-parameter-properties
18:13 : ESLint rule: naming-convention
20:50 : ESLint rule: no-unused-variables
21:58 : ESLint rule: no-floating-promises
23:35 : ESLint rule: no-async-await
27:53 : Config ESLint rule for an entire project
28:58 : ESLint rule: typedef
30:54 : ESLint rule: react/jsx-no-bind
🔖 My on-demand & free email courses
-------------------------------------------
📺 Mastering the SharePoint Framework
https://www.voitanos.io/course-master...
📺 Microsoft 365 Certified Developer Associate MS-600 Exam Prep
https://www.voitanos.io/course-prepar...
✉️ Explore & evaluate the SharePoint Framework
https://www.voitanos.io/ecourse-explo...
✉️ Understand the SharePoint Framework toolchain
https://www.voitanos.io/ecourse-under...
🔗 Links
-------------------------------------------
🌎 https://www.voitanos.io
🎙 Podcast: https://www.voitanos.io/podcast
/ andrewconnell
/ voitanos
/ andrewconnell
/ voitanos_llc
#sharepointframework