Code Monkey home page Code Monkey logo

eslint-plugin-headers's Introduction

eslint-plugin-headers

A flexible and --fixable rule for checking, inserting, and formatting file headers.

Supports variable content injection, configurable usage of block or line comments, custom comment block prefixes and suffixes, custom line prefixes, and spacing between the header and code.

Useful for inserting, enforcing, and updating copyright or licensing notices while preserving pragma expressions in leading content blocks.

This plugin is best used with a formatter like prettier.

Motivation

This plugin aims to be a successor to the popular but defunct plugin eslint-plugin-header. eslint-plugin-headers strives to implement the same features as eslint-plugin-header where possible, while sensibly extending features, supporting modern JavaScript frameworks, and maintaining compatibility with other common tools.

Installation

You'll first need to install ESLint:

npm i eslint --save-dev

Next, install eslint-plugin-headers:

npm install eslint-plugin-headers --save-dev

Usage

Flat config

Import the default export from the estlin-plugin-headers module. Add the headers key to the plugins section of your config object in the configuration file. You can omit the eslint-plugin- prefix:

import headers from "eslint-plugin-headers";

export default [{
  plugins: {
    headers
  }
}]

Then configure the rules you want to use under the rules section.

import headers from "eslint-plugin-headers";

export default [{
  plugins: {
    headers
  }
  rules: {
    "headers/header-format": [
      "error",
      {
        source: "string",
        content: "Copyright 2024. All rights reserved."
      }
    ]
  }
}]

Legacy .eslintrc config

Add headers to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix:

{
  "plugins": ["headers"]
}

Then configure the rules you want to use under the rules section.

{
  "rules": {
    "headers/header-format": [
      "error",
      {
        "source": "string",
        "content": "Copyright 2024. All rights reserved."
      }
    ]
  }
}

Usage with Vue

This project supports parsing Vue files via the AST generated by the vue-eslint-parser package. To properly apply this plugin's rules to Vue files, you must:

  1. Install the vue-eslint-parser package as a dev dependency.
  2. Specify the vue-eslint-parser in the configuration's languageOptions.parser field (or the "parser" field for legacy configurations), and
  3. Set the enableVueSupport flag for the appropriate rules.

Example configuration:

import headers from "eslint-plugin-headers";
import vueEslintParser from "vue-eslint-parser";

export default [
  {
    plugins: {
      headers 
    },
    files: ["**/*.vue"],
    rules: {
      "headers/header-format": [
        "error",
        {
          source: "string",
          content: "This is a header.",
          enableVueSupport: true,
        }
      ]
    },
    languageOptions: {
      parser: vueEslintParser,
    },
  }
];

With this configuration the following file would be transformed like so:

Before:

<template>
  <p>This is an example Vue file.</p>
</template>

After applying the fix:

<!--
  This is a header.
-->
<template>
  <p>This is an example Vue file.</p>
</template>

Since the vue-eslint-parser package strives to maintain compatibility with rules targeting JavaScript, it exposes Vue AST tokens to rules in different ways than the default ESlint parser. The means of exposing HTML Comment nodes are of specific interest to this plugin, and the mechanism to access these are substantially different than how a plugin would typically read a comment node, making it necessary to both specify this particular parser as well as setting the flag.

Examples

Example 0:

Example Configuration:

{
  "rules": {
    "headers/header-format": [
      "error",
      {
        "source": "string",
        "content": "Copyright 2024. All rights reserved."
      }
    ]
  }
}

Using the above configuration, here's a file without a matching header:

module.exports = 42;

When the fix is applied, the file now appears so:

/**
 * Copyright 2024. All rights reserved.
 */
module.exports = 42;

Example 1:

Using the same configuration, this file already has a header, this one containing pragmas:

/**
 * @fileoverview This file contains a magic number.
 * @author Rob Misasi
 */
module.exports = 42;

When the fix is applied, the file now appears so:

/**
 * Copyright 2024. All rights reserved.
 *
 * @fileoverview This file contains a magic number.
 * @author Rob Misasi
 */
module.exports = 42;

Example 2: Using the following configuration, variable values can be injected into the provided header:

{
  "rules": {
    "headers/header-format": [
      "error",
      {
        "source": "string",
        "content": "Copyright {year} {company}. All rights reserved.",
        "variables": {
          "year": "2077",
          "company": "Software Incorporated"
        }
      }
    ]
  }
}

We can then apply a fix to the following file:

/**
 * Copyright 1947 Hardware LLC. All rights reserved.
 */
module.exports = 42;

And get the resulting header:

/**
 * Copyright 2077 Software Incorporated. All rights reserved.
 */
module.exports = 42;

Options

Options are supplied through a single object with the following properties:

Name Type Required Default Description
source "file" | "string" Yes Indicates how the header content is supplied.
style "line" | "jsdoc" No "jsdoc" Indicates the comment style to enforce. A leading line-style comment block will only include adjacent line comments, although a line comment's content may be empty. No effect if enableVueSupport: true.
content string When source: "string" The string to enforce in the header comment.
path string When source: "file" The path to a file containing the header content to enforce.
preservePragmas boolean No true Preserves existing pragma expressions in leading comments when updating header. No effect when style: "line".
blockPrefix string No See below Content at the start of the leading comment block.
blockSuffix string No See below Content at the end of the leading comment block.
linePrefix string No See below Content prepended to the start of each line of content.
trailingNewlines number No Number of empty lines to enforce after the leading comment.
variables object No The keys to find and values to fill when formatting the provided header. Values must be strings.
enableVueSupport boolean No false EXPERIMENTAL! Enable support for parsing .vue files. Must be used with vue-eslint-parser. See above for details.

Default Prefixes and Suffixes

Example configuration:

export default [
  {
    // ...
    rules: {
      "headers/header-format": [
        "error",
        {
          source: "string",
          content: "This is a header.",
          // ...{Additional Configuration}
        }
      ]
    },
  }
]

The subsequent section titles contain the additional configuration inserted above, and the resulting comment that will be produced.

style: "line"

Expected/produced header:

// This is a header.
  • Default block prefix: None
  • Default block suffix: None
  • Default line prefix: " "
style: "jsdoc"

Expected/produced header:

/**
 * This is a header.
 */
  • Default block prefix: "*\n"
  • Default block suffix: "\n "
  • Default line prefix: " * "
enableVueSupport: true

Expected/produced header:

<!--
  This is a header.
-->
  • Default block prefix: "\n"
  • Default block suffix: "\n"
  • Default line prefix: " "

Future

  • Add support for common pragma expressions that don't utilize the @ symbol (e.g. eslint-disable)

Rules

๐Ÿ”ง Automatically fixable by the --fix CLI option.

Name Description ๐Ÿ”ง
header-format Verifies the content and format of a file's leading comment block. ๐Ÿ”ง

eslint-plugin-headers's People

Contributors

robmisasi avatar

Watchers

 avatar

eslint-plugin-headers's Issues

New line handling should be more forgiving

I currently work on a project with a mix of Unix and Windows line ending files. The header template I inject in my source file is in Unix style but some of the source files themselves are Windows style. Some code editor on our team normalize all line endings on save and git normalize them on commit. So during development on local environment line ending might often be inconsistent between files.

This prevent eslint-plugin-headers to correctly detect the header pattern already injected in some files because the line endings are different from the header template. Could the matching algorithm of the plugin be more forgiving of line ending ?

Matching of empty line in JSDoc comments

Here a small reproductible case. The plugin is setup to add the content of this file at the beginning of each file :

Copyright (c) 1998, Regents of the University of California
All rights reserved.

Redistribution and use in source and binary forms, with or without...

However, subsequent use of eslint won't match the comment inserted by the plugin :

/**
 * Copyright (c) 1998, Regents of the University of California
 * All rights reserved.
 *
 * Redistribution and use in source and binary forms, with or without...
 */

The issue seems to come from the comment matcher which always expect a trailing space on empty lines for JSDoc comments.

The matcher shouldn't assume the presence of a trailing space because most editors have a trim on save option. Moreover, the plugin comment formatter also trim trailing space when inserting comments.

Detecting header

Hello, I'm trying to use your lib in a Vue Single File component, it works very well, thank you for the effort to create this.

However I'm facing an issue, after to apply the header, eslint keep giving me the error, even with the header there.

Examples:
No header, showing the error to be fixed
image

After to run the --fix, works, the header is there
image

image

If I keep running --fix, the header continues to be added sequentially.

Do you have any idea about it?

Ps: Nothing special to be reproduced, just a clean vue3 project, typescript and eslint. All the other rules are working well.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.