"Lint was the name originally given to a particular program that flagged some suspicious and non-portable constructs (likely to be bugs) in C language source code. The term is now applied generically to tools that flag suspicious usage in software written in any computer language."

https://en.wikipedia.org/wiki/Lint_%28software%29

The term was derived from the name of the undesirable bits of fiber and fluff found in sheep's wool. (1979)

Stephen C. Johnson

Linting is the process of checking the source code for programmatic as well as stylistic mistakes.

A Lint or a Linter is a program that supports linting.

Why I think this is a good idea:

• Automation!!!!!

  • "We automate this process to promote readable and consistent coding styles"

    • https://www.theguardian.com/info/developer-blog/2014/may/13/improving-sass-code-quality-on-theguardiancom

• Code is a communication tool between developers

• Developer growth - learning by example

Lets do this.

https://atom.io/packages/linter-sass-lint

Using sass lint in your editor

https://github.com/skovhus/SublimeLinter-contrib-sass-lint

note: a node-only sass linter

Atom

Sublime

apm install linter-sass-lint

set up your config

http://git/AFebbraro/sass-lint/blob/master/.sass-lint.yml

Rules

Severity

0 = off

1 = warning

2 = error

# setting the configuration of a rule by setting it to an array

indentation: 
  - 2        # first item in the array is the severity
  -          # second item in the array is an object
    size: 4  # setting the size option to 4 spaces

https://github.com/sasstools/sass-lint/tree/master/docs/rules

Rules Documentation

Sass Lint in your build!

https://www.npmjs.com/package/gulp-sass-lint

https://github.com/alleyinteractive/sasslint-webpack-plugin

https://github.com/sasstools/sass-lint

Some others: Brackets, IntelliJ IDEA, RubyMine, WebStorm, PhpStorm, PyCharm

npm install -g sass-lint


npm install sass-lint --save


sass-lint bin/css/app.css -v -q

install sass-lint

webpack

webpack can only handle JavaScript natively, so we need the css-loader to process CSS files. We also need the style-loader to apply the styles in the CSS file.

https://github.com/webpack/css-loader

https://github.com/webpack/style-loader

https://github.com/jtangelder/sass-loader

install webpack plugin

npm install sasslint-webpack-plugin

note: sasslint-webpack-plugin has a dependency on sass-lint

webpack config

var sassLintPlugin = require('sasslint-webpack-plugin');


module.exports = {
  plugins: [
    new sassLintPlugin()
  ]
}

sassLintPlugin Defaults

// Default settings
module.exports = {
  plugins: [
    new sassLintPlugin({
      configFile: '.sass-lint.yml',
      context: ['inherits from webpack'],
      ignoreFiles: [],
      ignorePlugins: [],
      glob: '**/*.s?(a|c)ss',
      quiet: false,
      failOnWarning: false,
      failOnError: false,
      testing: false
    }),
  ]
}

running webpack

afebbraro@afebbrarombp ~/a/sass-lint> webpack

/Users/afebbraro/apps/sass-lint/src/scss/main.scss
  2:17  warning  Color 'green' should be written in its hexadecimal form #008000              no-color-keywords
  2:17  warning  Color literals such as 'green' should only be used in variable declarations  no-color-literals

✖ 2 problems (0 errors, 2 warnings)


/Users/afebbraro/apps/sass-lint/src/scss/main.scss
  2:17  warning  Color 'green' should be written in its hexadecimal form #008000              no-color-keywords
  2:17  warning  Color literals such as 'green' should only be used in variable declarations  no-color-literals

✖ 2 problems (0 errors, 2 warnings)

Hash: 0ec1bed1a67220beddca
Version: webpack 1.13.0
Time: 5562ms
        Asset      Size  Chunks             Chunk Names
app.bundle.js   1.86 kB       0  [emitted]  main
  css/app.css  31 bytes       0  [emitted]  main
   [0] multi main 40 bytes {0} [built]
    + 6 hidden modules

WARNING in /Users/afebbraro/apps/sass-lint/src/scss/main.scss
Child extract-text-webpack-plugin:
        + 2 hidden modules

    WARNING in /Users/afebbraro/apps/sass-lint/src/scss/main.scss

Thanks! 

amberfebbraro@quickenloans.com