Getting Started with Next.js - VSCode, ESLint and Prettier

• javascript

  132 141,679 6.0 JavaScript

  JavaScript Style Guide

  

As stated previously, see the Airbnb styling guide and react specific linting rules, to better understand the errors outputted by the linter. You may also want to disable specific rules which are not to your liking or do not follow your coding standards.

• eslint-config-google

  12 1,688 0.0 JavaScript

  Discontinued ESLint shareable config for the Google JavaScript style guide

  

Well done, we managed to set up ESLint using Airbnb’s JavaScript styling guide to our newly created Next.js project. You could have used another popular styling guide like Google, Standard, or even create your own to your liking.

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• eslint-config-standard

  7 2,555 8.7 TypeScript

  ESLint Config for JavaScript Standard Style

  

Well done, we managed to set up ESLint using Airbnb’s JavaScript styling guide to our newly created Next.js project. You could have used another popular styling guide like Google, Standard, or even create your own to your liking.

• eslint-config-prettier

  17 5,216 6.9 JavaScript

  Turns off all rules that are unnecessary or might conflict with Prettier.

  

Now since some prettier configs may conflict with ESLint, we need to turn off conflicting rules. This can easily be done by adding eslint-config-prettier:

• eslint-plugin-react

  67 8,810 8.6 JavaScript

  React-specific linting rules for ESLint

  

Prop spreading is forbidden react/jsx-props-no-spreading

• berry

  181 7,112 9.3 TypeScript

  📦🐈 Active development trunk for Yarn ⚒

  

yarn - Package Manager,

• prettier

  437 48,241 9.8 JavaScript

  Prettier is an opinionated code formatter.

  

We will be using Prettier as a code formatter. The main reason for using a code formatter is that it helps us maintain consistency throughout our codebase.

• InfluxDB

  www.influxdata.com sponsored

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

• Next.js

  2,039 120,313 10.0 JavaScript

  The React Framework

  

"Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed." - as stated on Next.js home page.

• ESLint

  378 24,231 9.7 JavaScript

  Find and fix problems in your JavaScript code.

  

We will be using ESLint as a linter. The main reasons for using this tool is that;

Suggest a related project