Nodejs项目配置Typescript,Eslint,prettier等

nodejs
留言

前言

现代化的工程项目搭建，已经不仅仅满足于可以用了，更多要求规范使用。为实现这已目的，项目搭建离不开Typescript、Eslint、prettier的配置。

Nodejs项目搭建

执行npm init -y命令生产package.json文件

Typescript

  • 安装typescript
    执行命令 npm install typescript --save-dev
  • 安装@types/node
    执行命令 npm install @types/node --save-dev
  • 生成tsconfig.json文件
    执行命令 npx tsc --init，常见配置见tsconfig配置
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    {
      "compilerOptions": {
        ...
        "rootDir": "./src",       // 读取ts文件根目录
        "outDir": "./dist",       // 生成js文件路径
        "removeComments": true,   // 生成js文件时移除注释
        ...
      }
      "include": ["src"],
      "exclude": ["node_modules"]
    }
  • 安装ts-node
    执行命令 npm install ts-node --save-dev, ts-node可以运行时解析ts文件，无需转换成js运行。
  • 配置nodemon
    新建nodemon.json文件
    1
    2
    3
    4
    5
    6
    {
      "watch": ["src"],
      "ext": ".ts,.js",
      "ignore": [],
      "exec": "ts-node ./src/index.ts"
    }
    package.json中配置scripts命令
    1
    2
    3
    4
    5
    "build": "tsc",
    "prestart": "npm run build",
    "start": "node ./dist/index.js",
    "start:dev": "nodemon",
    "lint": "eslint . --ext .js,.ts"

Eslint

  • 初始化Eslint
    执行命令 npx eslint --init，然后根据自己需求选择配置
  • 配置.eslintrc.js文件
    .eslintrc.js文件是配置文件，如果某些想忽略，可以新建文件.eslintignor，写入想要忽略的文件路径

prettier

  • 安装依赖
    执行命令npm install eslint-config-prettier eslint-plugin-prettier --save-dev安装 eslint-config-prettier、eslint-plugin-prettier即可
  • 修改.eslintrc.js文件
    1
    2
    3
    4
    5
    6
    7
    extends: [..., 'plugin:prettier/recommended'],
    overrides: [],
    parserOptions: {
      ecmaVersion: 'latest',
      sourceType: 'module',
      project: './tsconfig.json',
    },
  • 常见prettier配置
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    module.exports = {
      // 1.一行代码的最大字符数，默认是80(printWidth: <int>)
      printWidth: 80,
      // 2.tab宽度为2空格(tabWidth: <int>)
      tabWidth: 2,
      // 3.是否使用tab来缩进，我们使用空格(useTabs: <bool>)
      useTabs: false,
      // 4.结尾是否添加分号，false的情况下只会在一些导致ASI错误的其工况下在开头加分号，我选择无分号结尾的风格(semi: <bool>)
      semi: false,
      // 5.使用单引号(singleQuote: <bool>)
      singleQuote: true,
      // 6.object对象中key值是否加引号（quoteProps: "<as-needed|consistent|preserve>"）as-needed只有在需求要的情况下加引号，consistent是有一个需要引号就统一加，preserve是保留用户输入的引号
      quoteProps: 'as-needed',
      // 7.在jsx文件中的引号需要单独设置（jsxSingleQuote: <bool>）
      jsxSingleQuote: false,
      // 8.尾部逗号设置，es5是尾部逗号兼容es5，none就是没有尾部逗号，all是指所有可能的情况，需要node8和es2017以上的环境。（trailingComma: "<es5|none|all>"）
      trailingComma: 'es5',
      // 9.object对象里面的key和value值和括号间的空格(bracketSpacing: <bool>)
      bracketSpacing: true,
      // 10.jsx标签多行属性写法时，尖括号是否另起一行(jsxBracketSameLine: <bool>)
      jsxBracketSameLine: false,
      // 11.箭头函数单个参数的情况是否省略括号，默认always是总是带括号（arrowParens: "<always|avoid>"）
      arrowParens: 'always',
      // 12.range是format执行的范围，可以选执行一个文件的一部分，默认的设置是整个文件（rangeStart: <int>  rangeEnd: <int>）
      rangeStart: 0,
      rangeEnd: Infinity,
      // 18. vue script和style标签中是否缩进,开启可能会破坏编辑器的代码折叠
      vueIndentScriptAndStyle: false,
      // 19.    endOfLine: "<lf|crlf|cr|auto>" 行尾换行符,默认是lf,
      endOfLine: 'lf',
      // 20.embeddedLanguageFormatting: "off",默认是auto,控制被引号包裹的代码是否进行格式化
      embeddedLanguageFormatting: 'off',
    }

文档资料