Add SLDS Linter (#101)

@W-4267770@

.gitignore

@@ -78,3 +78,6 @@ jspm_packages/
 
 # no keys
 *.key
+
+# SalesforceDX
+.sfdx/

.vscode/launch.json

@@ -45,7 +45,8 @@
       "type": "node",
       "request": "launch",
       "cwd": "${workspaceRoot}",
-      "program": "${workspaceRoot}/packages/salesforcedx-apex-debugger/out/src/adapter/apexDebug.js",
+      "program":
+        "${workspaceRoot}/packages/salesforcedx-apex-debugger/out/src/adapter/apexDebug.js",
       "args": ["--server=4711"],
       "sourceMaps": true,
       "outFiles": ["${workspaceRoot}/packages/*/out/src/**/*.js"],
@@ -55,7 +56,8 @@
       "type": "node",
       "request": "launch",
       "name": "Launch Salesforce DX Utils Tests",
-      "program": "${workspaceRoot}/packages/salesforcedx-utils-vscode/node_modules/mocha/bin/_mocha",
+      "program":
+        "${workspaceRoot}/packages/salesforcedx-utils-vscode/node_modules/mocha/bin/_mocha",
       "args": [
         "-u",
         "tdd",
@@ -105,6 +107,7 @@
       "request": "launch",
       "runtimeExecutable": "${execPath}",
       "args": [
+        "${workspaceRoot}/packages/system-tests/assets/sfdx-simple",
         "--extensionDevelopmentPath=${workspaceRoot}/packages",
         "--extensionTestsPath=${workspaceRoot}/packages/salesforcedx-vscode-lightning/out/test"
       ],
@@ -127,12 +130,27 @@
       "outFiles": ["${workspaceRoot}/packages/*/out/**/*.js"],
       "preLaunchTask": "Compile"
     },
+    {
+      "name": "Launch Salesforce DX VS Code SLDS Linter Tests",
+      "type": "extensionHost",
+      "request": "launch",
+      "runtimeExecutable": "${execPath}",
+      "args": [
+        "--extensionDevelopmentPath=${workspaceRoot}/packages",
+        "--extensionTestsPath=${workspaceRoot}/packages/salesforcedx-slds-linter/out/test"
+      ],
+      "stopOnEntry": false,
+      "sourceMaps": true,
+      "outFiles": ["${workspaceRoot}/packages/*/out/test/**/*.js"],
+      "preLaunchTask": "Compile"
+    },
     {
       "name": "Launch Apex Debugger Tests",
       "type": "node",
       "request": "launch",
       "cwd": "${workspaceRoot}/packages/salesforcedx-apex-debugger",
-      "program": "${workspaceRoot}/packages/salesforcedx-apex-debugger/node_modules/mocha/bin/_mocha",
+      "program":
+        "${workspaceRoot}/packages/salesforcedx-apex-debugger/node_modules/mocha/bin/_mocha",
       "args": [
         "-u",
         "tdd",

.vscode/settings.json

@@ -14,6 +14,5 @@
   "editor.tabSize": 2,
   "editor.formatOnSave": true,
   "prettier.singleQuote": true,
-  "rewrap.wrappingColumn": 80,
+  "rewrap.wrappingColumn": 80
-  "typescript.check.tscVersion": false
 }

packages/salesforcedx-slds-linter/.vscode/launch.json

@@ -0,0 +1,2 @@
+// A launch configuration that compiles the extension and then opens it inside a new window
+{}

packages/salesforcedx-slds-linter/.vscode/settings.json

@@ -0,0 +1,10 @@
+// Place your settings in this file to overwrite default and user settings.
+{
+    "files.exclude": {
+        "out": false // set this to true to hide the "out" folder with the compiled JS files
+    },
+    "search.exclude": {
+        "out": true // set this to false to include "out" folder in search results
+    },
+    "typescript.tsdk": "./node_modules/typescript/lib" // we want to use the TS server from our node_modules folder to control its version
+}

packages/salesforcedx-slds-linter/.vscode/tasks.json

@@ -0,0 +1,30 @@
+// Available variables which can be used inside of strings.
+// ${workspaceRoot}: the root folder of the team
+// ${file}: the current opened file
+// ${fileBasename}: the current opened file's basename
+// ${fileDirname}: the current opened file's dirname
+// ${fileExtname}: the current opened file's extension
+// ${cwd}: the current working directory of the spawned process
+
+// A task runner that calls a custom npm script that compiles the extension.
+{
+    "version": "0.1.0",
+
+    // we want to run npm
+    "command": "npm",
+
+    // the command is a shell script
+    "isShellCommand": true,
+
+    // show the output window only if unrecognized errors occur.
+    "showOutput": "silent",
+
+    // we run the custom script "compile" as defined in package.json
+    "args": ["run", "watch", "--loglevel", "silent"],
+
+    // The tsc compiler is started in watching mode
+    "isBackground": true,
+
+    // use the standard tsc in watch mode problem matcher to find compile problems in the output.
+    "problemMatcher": "$tsc-watch"
+}

packages/salesforcedx-slds-linter/LICENSE.txt

@@ -0,0 +1,27 @@
+Copyright (c) 2017, Salesforce.com, Inc.
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification,
+are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this
+list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice, this
+list of conditions and the following disclaimer in the documentation and/or
+other materials provided with the distribution.
+
+* Neither the name of Salesforce.com nor the names of its contributors may be
+used to endorse or promote products derived from this software without specific
+prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
+ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
+ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

packages/salesforcedx-slds-linter/README.md

@@ -0,0 +1,4 @@
+## Introduction
+
+This is the SFDX SLDS Linter for checking deprecated Lightning Design System class names. This is mostly used in the
+Visual Studio Code extensions for Salesforce DX.

packages/salesforcedx-slds-linter/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@salesforce/salesforcedx-slds-linter",
+  "displayName": "SFDX SLDS Linting for VS Code",
+  "description": "Provides linting for deprecated SLDS class names",
+  "version": "40.9.0",
+  "publisher": "salesforce",
+  "license": "BSD-3-Clause",
+  "categories": ["Other"],
+  "engines": {
+    "vscode": "^1.13.0"
+  },
+  "devDependencies": {
+    "@types/chai": "^4.0.0",
+    "@types/glob": "^5.0.30",
+    "@types/mocha": "^2.2.38",
+    "@types/node": "^6.0.40",
+    "@types/sinon": "^2.3.2",
+    "chai": "^4.0.2",
+    "decache": "^4.1.0",
+    "glob": "^7.1.2",
+    "istanbul": "^0.4.5",
+    "mocha": "^3.2.0",
+    "mocha-junit-reporter": "^1.13.0",
+    "mocha-multi-reporters": "^1.1.4",
+    "nyc": "^11.0.2",
+    "remap-istanbul": "^0.9.5",
+    "sinon": "^2.3.6",
+    "source-map-support": "^0.4.15",
+    "typescript": "2.4.0",
+    "vscode": "1.1.2"
+  },
+  "scripts": {
+    "vscode:package": "npm prune --production",
+    "compile": "tsc -p ./",
+    "lint": "tslint --project .",
+    "watch": "tsc -watch -p .",
+    "clean": "shx rm -rf node_modules",
+    "postinstall": "node ./node_modules/vscode/bin/install",
+    "test": "node ./node_modules/vscode/bin/test"
+  },
+  "nyc": {
+    "reporter": ["text-summary", "lcov"]
+  },
+  "dependencies": {
+    "vscode-languageclient": "3.3.0",
+    "vscode-languageserver": "^3.3.0",
+    "@salesforce/salesforcedx-utils-vscode": "40.9.0"
+  }
+}

packages/salesforcedx-slds-linter/src/client/index.ts

@@ -0,0 +1,98 @@
+/*
+ * Copyright (c) 2017, salesforce.com, inc.
+ * All rights reserved.
+ * Licensed under the BSD 3-Clause license.
+ * For full license text, see LICENSE.txt file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+
+import * as path from 'path';
+import { nls } from '../messages';
+
+import {
+  commands,
+  ExtensionContext,
+  window
+} from 'vscode';
+import {
+  LanguageClient,
+  LanguageClientOptions,
+  ServerOptions,
+  TextEdit,
+  TransportKind
+} from 'vscode-languageclient';
+
+export function createLanguageServer(
+  context: ExtensionContext
+): LanguageClient {
+  // The server is implemented in node
+  const serverModule = context.asAbsolutePath(
+    path.join(
+      'node_modules',
+      '@salesforce',
+      'salesforcedx-slds-linter',
+      'out',
+      'src',
+      'server',
+      'index.js'
+    )
+  );
+  // The debug options for the server
+  const debugOptions = { execArgv: ['--nolazy', '--debug=6009'] };
+
+  // If the extension is launched in debug mode then the debug server options are used
+  // Otherwise the run options are used
+  const serverOptions: ServerOptions = {
+    run: { module: serverModule, transport: TransportKind.ipc },
+    debug: {
+      module: serverModule,
+      transport: TransportKind.ipc,
+      options: debugOptions
+    }
+  };
+
+  // Options to control the language client
+  const clientOptions: LanguageClientOptions = {
+    // Register the server for plain text documents
+    documentSelector: ['html'],
+    synchronize: {
+      // Synchronize the setting section 'sldsLanguageServer' to the server
+      configurationSection: 'sldsLanguageServer'
+    }
+  };
+
+  // Create the language client and start the client.
+  const client = new LanguageClient(
+    'sldsLanguageServer',
+    'SLDS Language Server',
+    serverOptions,
+    clientOptions
+  );
+
+  function applyTextEdit(uri: string, edits: TextEdit[]) {
+    const textEditor = window.activeTextEditor;
+    if (textEditor && textEditor.document.uri.toString() === uri) {
+      textEditor
+        .edit(mutator => {
+          for (const edit of edits) {
+            mutator.replace(
+              client.protocol2CodeConverter.asRange(edit.range),
+              edit.newText
+            );
+          }
+        })
+        .then(success => {
+          if (!success) {
+            window.showErrorMessage(
+              nls.localize('fix_error')
+            );
+          }
+        });
+    }
+  }
+
+  context.subscriptions.push(
+    commands.registerCommand('sfdx.force.lightning.slds.fix.deprecated.class', applyTextEdit)
+  );
+
+  return client;
+}

packages/salesforcedx-slds-linter/src/messages/i18n.ts

@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) 2017, salesforce.com, inc.
+ * All rights reserved.
+ * Licensed under the BSD 3-Clause license.
+ * For full license text, see LICENSE.txt file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+
+/**
+ * Conventions:
+ * _message: is for unformatted text that will be shown as-is to
+ * the user.
+ * _text: is for text that will appear in the UI, possibly with
+ * decorations, e.g., $(x) uses the https://octicons.github.com/ and should not
+ * be localized
+ *
+ * If ommitted, we will assume _message.
+ */
+export const messages = {
+  fix_problem:
+  `Fix this problem: %s`,
+  fix_same:
+  `Fix all instances of: %s`,
+  fix_same_default:
+  `same problems`,
+  fix_all:
+  'Fix all auto-fixable problems',
+  fix_error:
+  'Failed to apply SLDS Validator fixes to the document.',
+  general_deprecated_class_name:
+  'Deprecated SLDS class name',
+  deprecated_class_name:
+  `Deprecated SLDS class name (v2.3.1): Change %s to %s`
+};

packages/salesforcedx-slds-linter/src/messages/index.ts

@@ -0,0 +1,46 @@
+/*
+ * Copyright (c) 2017, salesforce.com, inc.
+ * All rights reserved.
+ * Licensed under the BSD 3-Clause license.
+ * For full license text, see LICENSE.txt file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+
+import {
+  BASE_FILE_EXTENSION,
+  BASE_FILE_NAME,
+  Config,
+  DEFAULT_LOCALE,
+  Localization,
+  Message
+} from '@salesforce/salesforcedx-utils-vscode/out/src/i18n';
+
+function loadMessageBundle(config?: Config): Message {
+  function resolveFileName(locale: string): string {
+    return locale === DEFAULT_LOCALE
+      ? `${BASE_FILE_NAME}.${BASE_FILE_EXTENSION}`
+      : `${BASE_FILE_NAME}.${locale}.${BASE_FILE_EXTENSION}`;
+  }
+
+  const base = new Message(
+    require(`./${resolveFileName(DEFAULT_LOCALE)}`).messages
+  );
+
+  if (config && config.locale && config.locale !== DEFAULT_LOCALE) {
+    try {
+      const layer = new Message(
+        require(`./${resolveFileName(config.locale)}`).messages,
+        base
+      );
+      return layer;
+    } catch (e) {
+      console.error(`Cannot find ${config.locale}, defaulting to en`);
+      return base;
+    }
+  } else {
+    return base;
+  }
+}
+
+export const nls = new Localization(
+  loadMessageBundle(JSON.parse(process.env.VSCODE_NLS_CONFIG))
+);

packages/salesforcedx-slds-linter/src/server/index.ts

@@ -0,0 +1,207 @@
+'use strict';
+
+import {
+  Command,
+  createConnection,
+  Diagnostic,
+  DiagnosticSeverity,
+  IConnection,
+  InitializeResult,
+  IPCMessageReader,
+  IPCMessageWriter,
+  TextDocuments,
+  TextEdit
+} from 'vscode-languageserver';
+
+import { nls } from '../messages';
+
+// Create a connection for the server. The connection uses Node's IPC as a transport
+const connection: IConnection = createConnection(
+  new IPCMessageReader(process),
+  new IPCMessageWriter(process)
+);
+
+// Create a simple text document manager. The text document manager
+// supports full document sync only
+const documents: TextDocuments = new TextDocuments();
+// Make the text document manager listen on the connection
+// for open, change and close text document events
+documents.listen(connection);
+
+// After the server has started the client sends an initialize request. The server receives
+// in the passed params the rootPath of the workspace plus the client capabilities.
+let workspaceRoot: string | undefined | null;
+connection.onInitialize((params): InitializeResult => {
+  workspaceRoot = params.rootPath;
+  return {
+    capabilities: {
+      // Tell the client that the server works in FULL text document sync mode
+      textDocumentSync: documents.syncKind,
+      codeActionProvider: true
+    }
+  };
+});
+
+// The content of a text document has changed. This event is emitted
+// when the text document first opened or when its content has changed.
+documents.onDidChangeContent(change => {
+  validateTextDocument(change.document.getText(), change.document.uri, connection);
+});
+
+documents.onDidOpen(change => {
+  validateTextDocument(change.document.getText(), change.document.uri, connection);
+});
+
+// The settings have changed. Is send on server activation
+// as well.
+connection.onDidChangeConfiguration(change => {
+  // Revalidate any open text documents
+  documents.all().forEach(doc => validateTextDocument(doc.getText(), doc.uri, connection));
+});
+
+let activeDiagnostics: Diagnostic[] = [];
+
+export function validateTextDocument(textDocument: String, uri: string, conn: any): void {
+  activeDiagnostics = [];
+  const lines = textDocument.split(/\r?\n/g);
+  let problems = 0;
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    const found = line.match(/slds\S*--[A-Za-z0-9_-]+/g) || [];
+    for (const match of found) {
+      const index = line.search(match) || -1;
+
+      if (index >= 0) {
+        const foundStringLength = match.length;
+        const fixedString = match.replace('--', '_');
+        problems++;
+        const diagnostic = <Diagnostic>{
+          code: `0${fixedString}`,
+          severity: DiagnosticSeverity.Warning,
+          range: {
+            start: { line: i, character: index },
+            end: { line: i, character: index + foundStringLength }
+          },
+          message: nls.localize('deprecated_class_name', line.substr(
+            index,
+            foundStringLength
+          ), fixedString),
+          source: 'slds'
+        };
+        activeDiagnostics.push(diagnostic);
+      }
+    }
+  }
+
+  // Send the computed diagnostics to VSCode.
+  conn.sendDiagnostics({
+    uri: uri,
+    diagnostics: activeDiagnostics
+  });
+}
+
+connection.onCodeAction(params => {
+  const uri = params.textDocument.uri;
+  const diagnostics = params.context.diagnostics;
+  const result: Command[] = [];
+  const edits: TextEdit[] = [];
+  let code = '';
+
+  for (const diagnostic of diagnostics) {
+    const codeStr = <string>diagnostic.code;
+    code = codeStr[0];
+    const replacementStr = codeStr.slice(1);
+
+    switch (code) {
+      case '0': {
+        edits.push({
+          range: diagnostic.range,
+          newText: replacementStr
+        });
+
+        result.push(
+          Command.create(
+            nls.localize('fix_problem', diagnostic.message),
+            'sfdx.force.lightning.slds.fix.deprecated.class',
+            uri,
+            edits
+          )
+        );
+      }
+    }
+  }
+
+  sameCodeActions(result, uri, code);
+  allCodeActions(result, uri);
+
+  return result;
+});
+
+function allCodeActions(result: Command[], uri: string) {
+  const fixAllEdits: TextEdit[] = [];
+
+  if (activeDiagnostics.length > 1) {
+    for (const codeAction of activeDiagnostics) {
+      const codeStr = codeAction.code as string;
+      const replacementStr = codeStr.slice(1);
+      fixAllEdits.push({
+        range: codeAction.range,
+        newText: replacementStr
+      });
+    }
+    result.push(
+      Command.create(
+        nls.localize('fix_all'),
+        'sfdx.force.lightning.slds.fix.deprecated.class',
+        uri,
+        fixAllEdits
+      )
+    );
+  }
+}
+
+function sameCodeActions(result: Command[], uri: string, problem: string) {
+  const fixSameEdits: TextEdit[] = [];
+  let codeMessage;
+
+  if (activeDiagnostics.length > 1) {
+    for (const codeAction of activeDiagnostics) {
+      const code = codeAction.code as string;
+      if (code[0] === problem) {
+        const codeStr = codeAction.code as string;
+        const replacementStr = codeStr.slice(1);
+        fixSameEdits.push({
+          range: codeAction.range,
+          newText: replacementStr
+        });
+
+        switch (problem) {
+          case '0': {
+            codeMessage = nls.localize('general_deprecated_class_name');
+            break;
+          }
+          default: {
+            codeMessage = nls.localize('fix_same_default');
+          }
+        }
+
+      }
+    }
+    result.push(
+      Command.create(
+        nls.localize('fix_same', codeMessage),
+        'sfdx.force.lightning.slds.fix.deprecated.class',
+        uri,
+        fixSameEdits
+      )
+    );
+  }
+}
+
+connection.onDidChangeWatchedFiles(change => {
+  // Monitored files have change in VSCode
+  connection.console.log('We received an file change event');
+});
+
+// Listen on the connection
+connection.listen();

packages/salesforcedx-slds-linter/test/index.ts

@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) 2017, salesforce.com, inc.
+ * All rights reserved.
+ * Licensed under the BSD 3-Clause license.
+ * For full license text, see LICENSE.txt file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+
+// tslint:disable-next-line:no-var-requires
+const testRunner = require('@salesforce/salesforcedx-utils-vscode/out/src/test/testrunner');
+
+// You can directly control Mocha options by uncommenting the following lines
+// See https://github.com/mochajs/mocha/wiki/Using-mocha-programmatically#set-options for more info
+testRunner.configure({
+  ui: 'bdd', // the TDD UI is being used in extension.test.ts (suite, test, etc.)
+  useColors: true // colored output from test results
+});
+
+module.exports = testRunner;

packages/salesforcedx-slds-linter/test/server.test.ts

@@ -0,0 +1,55 @@
+/*
+ * Copyright (c) 2017, salesforce.com, inc.
+ * All rights reserved.
+ * Licensed under the BSD 3-Clause license.
+ * For full license text, see LICENSE.txt file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+
+import { assert, expect } from 'chai';
+import * as sinon from 'sinon';
+import { validateTextDocument } from '../src/server/index';
+
+describe('SLDS Linter Language Server', () => {
+
+  let args: any;
+  const connection = {
+    sendDiagnostics: (obj: any) => {
+      args = obj;
+    }
+  };
+
+  it('Should send correct string', () => {
+
+    validateTextDocument('\n class"slds-button--brand" \n', 'uri', connection);
+    if (args) {
+      expect(args.diagnostics[0].code.slice(1)).equals('slds-button_brand');
+    } else {
+      assert(args, 'Server connection arguments are null');
+    }
+
+  });
+
+  it('Should diagnose 2 deprecated class names', () => {
+
+    validateTextDocument('\n class"slds-button--brand slds-text-color--default" \n', 'uri', connection);
+    if (args) {
+      expect(args.diagnostics.length).equals(2);
+    } else {
+      assert(args, 'Server connection arguments are null');
+    }
+
+  });
+
+  it('Should send diagnostic to connection', () => {
+
+    const mock = sinon.mock(connection);
+    validateTextDocument('\n class"slds-button--brand"" \n', 'uri', connection);
+    if (args) {
+      mock.expects('sendDiagnostics').once();
+    } else {
+      assert(args, 'Server connection arguments are null');
+    }
+
+  });
+
+});

packages/salesforcedx-slds-linter/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es6",
+    "lib": ["es6", "dom"],
+    "sourceMap": true,
+    "declaration": true,
+    "moduleResolution": "node",
+    "noImplicitAny": true,
+    "rootDir": ".",
+    "outDir": "out",
+    "preserveConstEnums": true,
+    "strict": true,
+    "baseUrl": ".",
+    "paths": {
+      "*": ["node_modules/*", "*"]
+    }
+  },
+  "exclude": ["node_modules", ".vscode-test", "out"]
+}

packages/salesforcedx-vscode-core/test/commands/commands.test.ts

@@ -22,7 +22,8 @@ import {
 // tslint:disable:no-unused-expression
 describe('Command Utilities', () => {
   const WORKSPACE_NAME = 'sfdx-simple';
-  const SFDX_SIMPLE_NUM_OF_DIRS = 11;
+  const SFDX_SIMPLE_NUM_OF_DIRS = 12;
+
   describe('EmptyParametersGatherer', () => {
     it('Should always return continue with empty object as data', async () => {
       const gatherer = new EmptyParametersGatherer();

packages/salesforcedx-vscode-lightning/README.md

@@ -1,5 +1,5 @@
 # salesforcedx-vscode-lightning
-This extension uses the default HTML language server from VS Code to provide syntax highlighting, code completion, and an outline view of your files.
+This extension uses the default HTML language server from VS Code to provide syntax highlighting, code completion, an outline view of your files, and a Salesforce Lightning Design System (SLDS) linter.
 
 For best results, use this extension with the other extensions in the [salesforcedx-vscode](https://marketplace.visualstudio.com/items?itemName=salesforce.salesforcedx-vscode) bundle.  
 
@@ -27,6 +27,14 @@ Currently, Visual Studio Code extensions are not signed or verified on the Micro
 
    ![List of symbols in a .js file from a Lightning bundle](https://raw.githubusercontent.com/forcedotcom/salesforcedx-vscode/develop/packages/salesforcedx-vscode-lightning/images/lightning_outline.png)
 
+* Salesforce Lightning Design System Linter
+   * Detects deprecated BEM syntax (`--`) for Salesforce Lightning Design System class names in HTML files
+   * Warning message displays on hover
+   * Code actions are available on click
+   Note: The linter won't run if SLDS is included as a static resource in your project.
+
+   ![SLDS Linter detecting deprecated '--' class name syntax](https://raw.githubusercontent.com/forcedotcom/salesforcedx-vscode/develop/packages/salesforcedx-vscode-lightning/images/lightning_slds.png)
+
 ## Resources
 * Trailhead: [Get Started with Salesforce DX](https://trailhead.salesforce.com/trails/sfdx_get_started)
 * _[Salesforce DX Developer Guide (Beta)](https://developer.salesforce.com/docs/atlas.en-us.sfdx_dev.meta/sfdx_dev)_

packages/salesforcedx-vscode-lightning/package.json

@@ -22,6 +22,9 @@
     "vscode": "^1.13.0"
   },
   "categories": ["Languages"],
+  "dependencies": {
+    "@salesforce/salesforcedx-slds-linter": "40.9.0"
+  },
   "devDependencies": {
     "@salesforce/salesforcedx-utils-vscode": "40.9.0",
     "@types/chai": "^4.0.0",
@@ -29,6 +32,7 @@
     "@types/node": "^6.0.40",
     "@types/sinon": "^2.3.2",
     "chai": "^4.0.2",
+    "cross-env": "^5.0.5",
     "mocha": "3.2.0",
     "sinon": "^2.3.6",
     "typescript": "2.4.0",
@@ -45,8 +49,11 @@
     "clean":
       "shx rm -rf node_modules && shx rm -rf out && shx rm -rf coverage && shx rm -rf .nyc_output",
     "postinstall": "node ./node_modules/vscode/bin/install",
-    "test": "node ./node_modules/vscode/bin/test"
+    "test":
+      "cross-env CODE_TESTS_WORKSPACE='../system-tests/assets/sfdx-simple' node ./node_modules/vscode/bin/test"
   },
+  "activationEvents": ["workspaceContains:sfdx-project.json"],
+  "main": "./out/src",
   "contributes": {
     "languages": [
       {

packages/salesforcedx-vscode-lightning/src/index.ts

@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) 2017, salesforce.com, inc.
+ * All rights reserved.
+ * Licensed under the BSD 3-Clause license.
+ * For full license text, see LICENSE.txt file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+
+import * as languageServer from '@salesforce/salesforcedx-slds-linter/out/src/client';
+import * as vscode from 'vscode';
+
+export function activate(context: vscode.ExtensionContext) {
+  console.log('SFDX SLDS Linter Extension Activated');
+  vscode.workspace.findFiles('**/staticresources/*.resource').then(
+    // all good
+    (result: vscode.Uri[]) => {
+      for (const file of result) {
+        if (file.path.search(/(SLDS|slds)[0-9]+/g) !== -1) {
+          return;
+        }
+      }
+      const sldsServer = languageServer.createLanguageServer(context).start();
+      context.subscriptions.push(sldsServer);
+    },
+    // rejected
+    (reason: any) => {
+      // output error
+      vscode.window.showErrorMessage(reason);
+    }
+  );
+}
+
+export function deactivate() {
+  console.log('SFDX SLDS Linter Extension Deactivated');
+}

packages/salesforcedx-vscode-lightning/test/deprecatedClassName.test.ts

@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) 2017, salesforce.com, inc.
+ * All rights reserved.
+ * Licensed under the BSD 3-Clause license.
+ * For full license text, see LICENSE.txt file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+
+import { expect } from 'chai';
+import * as path from 'path';
+import * as vscode from 'vscode';
+
+describe('SLDS Deprecated Class Name', () => {
+  let res: vscode.Uri[];
+
+  before(async () => {
+    if (vscode.workspace.rootPath) {
+      res = await vscode.workspace.findFiles(
+        path.join('**', 'DemoComponent.cmp')
+      );
+      await vscode.workspace
+        .openTextDocument(res[0])
+        .then(document => vscode.window.showTextDocument(document));
+    }
+  });
+
+  it('Should create SFDX fix deprecated class command', async () => {
+    const commandList = await vscode.commands.getCommands(true);
+    expect(commandList).to.include('sfdx.force.lightning.slds.fix.deprecated.class');
+  });
+
+  after(async () => {
+    await vscode.commands.executeCommand('workbench.action.closeActiveEditor');
+  });
+});

packages/salesforcedx-vscode-lightning/tsconfig.json

@@ -1,23 +1,20 @@
 {
-    "compilerOptions": {
+  "compilerOptions": {
-        "module": "commonjs",
+    "module": "commonjs",
-        "target": "es6",
+    "target": "es6",
-        "lib": [
+    "lib": ["dom", "es6"],
-            "dom",
+    "sourceMap": true,
-            "es6"
+    "declaration": true,
-        ],
+    "moduleResolution": "node",
-        "sourceMap": true,
+    "noImplicitAny": true,
-        "declaration": true,
+    "rootDir": ".",
-        "moduleResolution": "node",
+    "outDir": "out",
-        "noImplicitAny": true,
+    "preserveConstEnums": true,
-        "rootDir": ".",
+    "strict": true,
-        "outDir": "out",
+    "baseUrl": ".",
-        "preserveConstEnums": true,
+    "paths": {
-        "strict": true
+      "*": ["node_modules/*", "*"]
-    },
+    }
-    "exclude": [
+  },
-        "node_modules",
+  "exclude": ["node_modules", ".vscode-test", "out"]
-        ".vscode-test",
-        "out"
-    ]
 }

packages/system-tests/assets/sfdx-simple/force-app/main/default/aura/DemoComponent/DemoComponent.cmp

@@ -0,0 +1,6 @@
+<aura:component implements="force:appHostable">
+  <div>
+    <div class="slds-text-color--default">Text 1</div>
+    <div class="slds-text-align--left">Text 2</div>
+  </div>
+</aura:component>

packages/system-tests/assets/sfdx-simple/force-app/main/default/aura/DemoComponent/DemoComponent.cmp-meta.xml

@@ -0,0 +1,5 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<AuraDefinitionBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+  <apiVersion>38.0</apiVersion>
+  <description>A Lightning Component Bundle</description>
+</AuraDefinitionBundle>