Week 4: Configs & Requirements - Plous01/ProjectTech GitHub Wiki

Research

Linting (implementation)

Linting is commonly used to enforce consistent 'code quality', what do we mean by that?

Linting is the process of running a program that will analyse code for potential errors.

Linting is the process of checking the source code for Programmatic as well as Stylistic errors. This is most helpful in identifying some common and uncommon mistakes that are made during coding.

A Lint or a Linter is a program that supports linting (verifying code quality). They are available for most languages like JavaScript, CSS, HTML, Python, etc. (stackoverflow).

What are common tools for 'linting'?

ES Lint

ESLint is completely plug-able, every single rule is a plugin and we can add more rules at run-time. It is the most recent out of the three libraries. It is designed to be easily extensible, comes with a large number of custom rules, and it’s easy to install more rules in the form of plugins. It gives concise output, and also includes the rule name by default so you always know which rules are causing the error messages.

Pros Cons
+ Completely configurable — we can configure/enable/disable any rule - Needs initial configuration to get started
+ Extensible — We can create our own rules - A bit slow
+ Has a rich set of existing rules as per best practices
+ Completely supports ES6 and React
+ Easy to understand output with rule names
+ Rules are very well documented with examples
+ Configured through a configuration file (json/yaml/js) — Easy to share configuration across team members
+ Easy integration with IDE

JS Hint

JS Hint is the successor of JS Lint.

Pros Cons
+ It has very good community support - Difficult to know which rule is failing
+ Configurable — we can easily configure, enable/disable rules - Not extensible — we cannot create custom rules
+ Has support for many libraries out of the box, like jQuery, QUnit, NodeJS, Mocha - Does not support React
+ Supports basic ES6

JS Lint

JS Lint is one of the oldest JavaScript linting tool available.

Pros Cons
+ It comes pre-configured and is ready to go -It is not user configurable
- It is not extensible — we cannot add custom rules
- It does not very good documentation
- Difficult to identify the rule which is failing
- No support for ES6 or React

How can you implement these tools in your own project?

There are basically two types of setup:

  • Editor specific: extension in your editor
  • Project specific: package.json

ESLint is a popular option for JavaScript. It is very extensible and has a useful Q&A setup tool. Once installed, eslint can be used to lint your files from the command line. Even better, there are ESLint plugins for most editors, including Atom, that can check your code as you work on it and let you know if you’re in trouble with dots next to the offending lines. Some errors can also be fixed with a click or flag in the CLI if you are so inclined.

What are the difference between syntax and stylistic errors?

In computer science, a syntax error is an error in the syntax of a sequence of characters or tokens that is intended to be written in a particular programming language.

Extensions

Some extentions that I like:

  • Beautify: Beautify JavaScript, HTML and CSS.
  • ESLint: A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript.
  • Markdownlint: Markdown linting and style checking for Visual Studio Code.
  • Debugger for Chrome: Debug your JavaScript code in the Chrome browser, or any other target that supports the Chrome Debugger protocol.
  • Vscode-icons: Icons for Visual Studio Code.
  • IntelliSense for CSS class names in HTML: CSS class name completion for the HTML class attribute based on the definitions found in your workspace.
  • JavaScript (ES6) code snippets: Code snippets for JavaScript in ES6 syntax.
  • NPM: This extention supports running npm scripts defined in the package.json file and validating the installed modules against the dependencies defined in the package.json.
  • Atom one light: Light color theme.
  • Dark mode: Dark color theme.

Usability Test

Feedback

  • "Your interface still looks a bit basic, maybe you can add some style."
  • "Some pages are not linked, so you should link them".
  • Because you miss some pages, it's a little difficult to understand the flow of you website."

Requirements List

Narrow down your Job Story in specific small functionalities and make a list of requirements your feature should have.

  • Submit/login
  • Filter

Resources

⚠️ **GitHub.com Fallback** ⚠️