ESLint、StyleLint 、Prettier 和 jsconfig、别名路径跳转、gitignore 的配置

砺能
738 阅读6分钟

概述

ESLint

ESLint的目标是提供一个插件化的JavaScript代码检测工具。ESLint 的初衷是为了让程序员可以创建自己的检测规则。ESLint 的所有规则都被设计成可插入的。ESLint 的默认规则与其他的插件并没有什么区别，规则本身和测试可以依赖于同样的模式。为了便于人们使用，ESLint 内置了一些规则，也可以在使用过程中自定义规则。

ESLint 使用 Node.js 编写，这样既可以有一个快速的运行环境的同时也便于安装。

StyleLint

一个强大的，现代的代码检查工具，可以帮助您避免错误并在您的样式中强制执行约定。

StyleLint 优点：

  • 其支持 Less、Sass 这类预处理器；
  • 在社区活跃度上，有非常多的 第三方插件 ；
  • 在 Facebook，Github，WordPress 等公司得到实践，能够覆盖很多场景。

Prettier

Prettier是一个代码格式化工具，它可以支持JS/JSX/TS/Flow/JSON/CSS/LESS等文件格式。

为什么要用Prettier：用来替代lint中的一些场景，比如说分号/tab缩进/空格/引号，这些在lint工具检查出问题之后还需要手动修改，而通常这样的错误都是空格或者符号之类的，这样相对来说不太优雅，利用格式化工具自动生成省时省力。

Prettier的优势：1. 可配置化；2. 支持多种语言；3. 集成多数的编辑器；4. 简洁的配置项。

常用配置选项

Prettier 常用配置选项

// .prettierrc.js:
module.exports = {
  // 一行最多 100 字符
  printWidth: 100,
  // 使用 2 个空格缩进
  tabWidth: 2,
  // 不使用缩进符，而使用空格
  useTabs: false,
  // 行尾需要有分号
  semi: true,
  // 使用单引号
  singleQuote: true,
  // 对象的 key 仅在必要时用引号
  quoteProps: 'as-needed',
  // jsx 不使用单引号，而使用双引号
  jsxSingleQuote: false,
  // 末尾不需要逗号
  trailingComma: 'all',
  // 大括号内的首尾需要空格
  bracketSpacing: true,
  // jsx 标签的反尖括号需要换行
  jsxBracketSameLine: false,
  // 箭头函数，只有一个参数的时候，也需要括号
  arrowParens: 'always',
  // 每个文件格式化的范围是文件的全部内容
  rangeStart: 0,
  rangeEnd: Infinity,
  // 不需要写文件开头的 @prettier
  requirePragma: false,
  // 不需要自动在文件开头插入 @prettier
  insertPragma: false,
  // 使用默认的折行标准
  proseWrap: 'preserve',
  // 根据显示样式决定 html 要不要折行
  htmlWhitespaceSensitivity: 'css',
  // 换行符使用 lf
  endOfLine: 'auto',
};

ESLint 的配置

初始化项目工程

// 初始化项目工程,生成的默认的 package.json
npm init -y

1654961316019.png 1654961379582.png

安装并初始化ESLint

在项目package.json的同级目录下执行以下命令，安装 eslint 包。

// 在项目工程中安装 eslint
npm i eslint -D

1654961453535.png 1654961553390.png

在根目录进行 eslint 的初始化配置

npx eslint --init

1654962145611.png 1654962215224.png 1654962584062.png

// .eslintrc.js:
module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: ['plugin:vue/essential', 'standard'],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  plugins: ['vue'],
  // eslint 配置规则
  rules: {
    /**
    * "off"或者0    //关闭规则关闭
    * "warn"或者1    //在打开的规则作为警告（不影响退出代码）
    * "error"或者2    //把规则作为一个错误（退出代码触发时为1）
    */
      quotes: [1, 'single'], // 规则为警告 - 引号类型为单引号
      semi: [1, 'always'], // 规则为警告 - 语句强制分号结尾
      'no-console': 0, // 允许使用console
  }
}

visual studio code 安装 eslint

1654963098735.png

配置 visual studio code 配置文件

配置文件所在文件位置为 C:/Users/z/AppData/Roaming/Code/User/settings.json。

// settings.json:
{
    ...
    "editor.formatOnType": true,
        "eslint.codeAction.showDocumentation": {
            "enable": true
        },
        "editor.codeActionsOnSave": {
            "source.fixAll.eslint": true,  // 文件保存时启动 eslint自动修复功能
        },
        "eslint.validate": ["javascript", "javascriptreact", "html", "vue"],
    ...
}

StyleLint 的配置

Prettier 的配置

在项目中安装 prettier: npm install prettier -D;(可以省略该过程)

在项目根目录下新建 prettier的配置文件 .prettierrc 或 .prettierrc.js。

如果文件名为 .prettierrc ，则配置文件的数据格式为json；
如果文件名为 .prettierrc.js，则配置文件为导出配置对象。

这里以 .prettierrc.js 进行配置：

module.exports = {
    tabWidth: 2, // 使用 2 个空格缩进
    singleQuote: true, // 使用单引号
    jsxSingleQuote: true,
    jsxBracketSameLine: false, // jsx 标签的反尖括号需要换行
    printWidth: 800, // 一行最多 800 字符
    htmlWhitespaceSensitivity: 'css', // 根据显示样式决定 html 要不要折行
    arrowParens: 'always', // 箭头函数，只有一个参数的时候，也需要括号
};

然后在 visual studio code 中安装插件 Prettier - Code formatter;

1654964563407.png

修改配置文件

修改 C:/Users/z/AppData/Roaming/Code/User/settings.json 配置文件。

// settings.json:
{
    ...
   // setting.json文件
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
    ...
}

注意：.prettierrc（或 .prettierrc.js）配置文件的配置优先级比 settings.json 中的配置优先级高，所以如果两个文件中都有配置共同的数据属性选项，则按照 .prettierrc 文件中的配置执行。

完整的配置

// C:/Users/z/AppData/Roaming/Code/User/settings.json:
{
  "window.zoomLevel": 1,
  "workbench.colorTheme": "Monokai",
  "editor.fontSize": 13, // 设置字体大小为13
  "javascript.updateImportsOnFileMove.enabled": "always",
  "editor.tabSize": 2, // 在创建文件的时候设置换行的 tab 为2
  "js/ts.implicitProjectConfig.experimentalDecorators": true,
  "workbench.editor.enablePreview": false,
  "search.useReplacePreview": false,
  "security.workspace.trust.untrustedFiles": "open",
  "editor.wordWrapColumn": 2,
  "prettier.semi": true,

  //setting.json文件

  "editor.formatOnType": true,
  "eslint.codeAction.showDocumentation": {
    "enable": false
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript", "javascriptreact", "html", "vue"],

  //setting.json文件

  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "workbench.tree.indent": 16
}

jsconfig.json 的配置

在项目根目录下新建 jsconfig.json 文件，进行相关配置。

// jsconfig.json:
{
    "compilerOptions": {
        "baseUrl": "./",  
        "paths": {
            "@/*": ["./src/*"] // 解决项目中使用@作为路径别名，导致vscode无法跳转文件的问题
        },
        "target": "ES6",
        "module": "commonjs",
        "allowSyntheticDefaultImports": true
    },
    "include": ["src/**/*"],
    "exclude": ["node_modules", "dist"] // 提高 IDE 性能
}

拓展
从vue文件直接跳到对应的定义接口Api函数的js文件的配置
vue项目中 jsconfig.json概念及使用步骤
简单说说jsconfig.json

别名路径跳转

① 在 visual studio code 中安装 Alias Jump 插件并启用插件(安装完默认开启)；
② 在 C:/Users/z/AppData/Roaming/Code/User/settings.json 文件中添加别名映射配置(也可以省略该步骤，此时就会采用默认配置 @ => 'src')。

注意：如果使用 Alias Jump 插件进行路径映射跳转，jsconfig.json 中如下配置选项则应该注释，否则就会冲突，导致Alias Jump 插件无效。

"paths": {
    //"@/*": ["./src/*"] // 解决项目中使用@作为路径别名，导致vscode无法跳转文件的问题
},

1660133015389.png

// C:/Users/z/AppData/Roaming/Code/User/settings.json:
{
    ...
    "aliasJump.alias": {
        "@/components": ["./src/components"], // 可以处理 vue中组件使用别名的时候 ctrl+鼠标左键无法跳转到对应组件的问题
     }
    ...
}

1660133957784.png

gitignore 的配置

在项目根目录下新建 .gitignore 文件，在提交代码到 git 时，通过该文件里面的规则忽略需要上传到 git 的目录或文件。

常用匹配示例：

bin/:  // 忽略当前路径下的 bin文件夹，该文件夹下的所有内容都会被忽略，不忽略 bin 文件
/bin:  // 忽略根目录下的bin文件
/*.c:  // 忽略 cat.c，不忽略 build/cat.c
debug/*.obj:  // 忽略 debug/io.obj，不忽略 debug/common/io.obj 和 tools/debug/io.obj
**/foo:  // 忽略 /foo, a/foo, a/b/foo等
a/**/b:  // 忽略 a/b, a/x/b, a/x/y/b等
!/bin/run.sh:  // 不忽略 bin 目录下的 run.sh 文件
*.log:  // 忽略所有 .log 文件
config.php:  // 忽略当前路径的 config.php 文件

1660453634975.png

拓展
gitignore 文件中忽略项不起作用的解决方法
.gitignore的用法

编辑器的 .edtitorconfig 配置

用 editor config 配置统一编辑器配置
使用 EditorConfig 创建可移植的自定义编辑器设置

拓展

Prettier的介绍
vue3项目使用prettier格式化代码

avatar
文章
阅读
粉丝