0

Should I need to worry about these lint errors in Using gulp serve in the SharePoint Framework Office UI Fabric Components tutorial?

https://github.com/SharePoint/sp-dev-docs/wiki/Using-Office-UI-Fabric-Components

    Error - tslint - src\webparts\documentCardExample\components\DocumentCardExample.tsx(10,10): error no-unused-variable: unused variable: 'css'
    Error - tslint - src\webparts\documentCardExample\components\DocumentCardExample.tsx(12,8): error no-unused-variable: unused variable: 'styles'
    Error - tslint - src\webparts\documentCardExample\components\DocumentCardExample.tsx(29,6): error trailing-comma: trailing comma
    Error - tslint - src\webparts\documentCardExample\components\DocumentCardExample.tsx(19,15): error typedef: expected call-signature: 'render' to have a typedef
    Error - tslint - src\webparts\documentCardExample\components\DocumentCardExample.tsx(20,7): error prefer-const: Identifier 'previewProps' never appears on the LHS of an assignment - use const instead of let for its declaration.
2

Those are all valid lint errors which should go away if you make the following changes in your DocumentCardExample.tsx

1) Remove the following import statements as they are not being used anymore:

import { css } from 'office-ui-fabric-react';
import styles from '../ShowDocuments.module.scss';

3) Replace the the render method in the tutorial with this one:

public render(): JSX.Element {
    const previewProps: IDocumentCardPreviewProps = {
      previewImages: [
        {
          previewImageSrc: require('document-preview.png'),
          iconSrc: require('icon-ppt.png'),
          width: 318,
          height: 196,
          accentColor: '#ce4b1f'
        }
      ]
    };

    return (
      <DocumentCard onClickHref='http://bing.com'>
        <DocumentCardPreview { ...previewProps } />
        <DocumentCardTitle title='Revenue stream proposal fiscal year 2016 version02.pptx'/>
        <DocumentCardActivity
          activity='Created Feb 23, 2016'
          people={
            [
              { name: 'Kat Larrson', profileImageSrc: require('avatar-kat.png') }
            ]
          }
          />
      </DocumentCard>
    );
  }
  • 1
    Should this be used in the Tutorial itself rather than the current render() method ? – Nigel Price Aug 25 '16 at 15:04
  • Yes, this is the same code in the tutorial tweaked to get rid of the lint errors. – Vardhaman Deshpande Aug 25 '16 at 15:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.