prettier+eslint+git hooks (husky+lint-staged)+stylelint+typescript+vscode的配置流程

1.先創(chuàng)建目錄和package.json

mkdir base
cd base
npm init -y

2.創(chuàng)建git倉庫

git init

把你寫node用的gitignore搬過來

# 忽略vuepress產(chǎn)生的緩存
.temp/
.cache/

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*

# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage
*.lcov

# nyc test coverage
.nyc_output

# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# TypeScript v1 declaration files
typings/

# TypeScript cache
*.tsbuildinfo

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variables file
.env
.env.test

# parcel-bundler cache (https://parceljs.org/)
.cache

# Next.js build output
.next

# Nuxt.js build / generate output
.nuxt
dist

# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and *not* Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public

# vuepress build output
.vuepress/dist

# Serverless directories
.serverless/

# FuseBox cache
.fusebox/

# DynamoDB Local files
.dynamodb/

# TernJS port file
.tern-port

3.vscode的stylelint，eslint狈究，prettier插件都安裝上

4.安裝和配置typescript

安裝述吸，然后創(chuàng)建配置文件

npm install --save-dev typescript
npx tsc --init

需要對(duì)typescript的配置文件進(jìn)行如下的修改

lib選項(xiàng)比較關(guān)鍵，不聲明使用的lib會(huì)導(dǎo)致es6的一些對(duì)象無法正常使用啥么，因?yàn)閠ypescript編譯使用的類型文件不指定的話就是用你的編譯目標(biāo)的，默認(rèn)就是es5

指定了產(chǎn)物輸出目錄贰逾，和ts源代碼所在的目錄

開啟sourceMap悬荣，移除產(chǎn)物中的評(píng)論，開啟嚴(yán)格模式

"lib": ["es2015","dom"],         
 "outDir": "dist",   
  "rootDir": "src",                             /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */

 "sourceMap": true,                           /* Generates corresponding '.map' file. */
  "removeComments": true,                      /* Do not emit comments to output. */
  "strict": true,                                 /* Enable all strict type-checking options. */

5.安裝prettier疙剑，eslint氯迂，stylelint

npm install --save-dev eslint-config-prettier eslint prettier stylelint-config-prettier stylelint

其中這兩個(gè)npm包是用來解決prettier和lint工具的沖突的践叠，實(shí)際作用是關(guān)閉lint工具里面和prettier會(huì)沖突的選項(xiàng)。所以在extends的時(shí)候放到最后面保證會(huì)覆蓋前面的配置嚼蚀。

stylelint-config-prettier
eslint-config-prettier

eslint內(nèi)置的init選項(xiàng)還是挺好用的禁灼，你選幾個(gè)選項(xiàng)就能把需要的包都安裝上

比如我如果寫node的typescript程序，個(gè)人偏好無分號(hào)的standard編碼風(fēng)格轿曙。那么就要安裝下面的插件

npm install --save-dev @typescript-eslint/eslint-plugin@latest eslint-config-standard@latest eslint@^7.12.1 eslint-plugin-import@^2.22.1 eslint-plugin-node@^11.1.0 eslint-plugin-promise@^4.2.1 @typescript-eslint/parser@latest

它會(huì)自動(dòng)生成配置文件

然后把你的prettier配置文件復(fù)制過來

module.exports = {
  semi: false,
  singleQuote: true,
}

在eslint配置.eslintrc.js里面添加prettier兼容,prettier放在extends列表的最末端

 extends: [
    'standard',
    'prettier'
  ],

stylelint配置.stylelintrc.js兼容prettier

module.exports = {
  extends: [
    // other configs ...
    'stylelint-config-prettier',
  ],
}

6.安裝git hooks（husky+lint-staged）

npm install --save-dev husky lint-staged

配置git hooks

npx husky install
npx husky add .husky/pre-commit "npx lint-staged"

在package.json里添加lint-staged的配置

"lint-staged": {
    "**/*.{js,jsx}": [
      "eslint",
      "prettier  --write"
    ],
    "**/*.{css,scss,less}": [
      "stylelint",
      "prettier  --write"
    ], 
    "**/*.{vue}": [
      "eslint",
      "stylelint",
      "prettier  --write"
    ]
  },

7.powershell腳本編寫腳手架實(shí)現(xiàn)一鍵搭建開發(fā)環(huán)境

花了差不多一天時(shí)間復(fù)習(xí)了powershell弄捕，寫了這個(gè)腳手架腳本

使用方式是把這個(gè)腳本添加到環(huán)境變量或者直接放到當(dāng)前目錄然后執(zhí)行，除了powershell運(yùn)行環(huán)境导帝，需要安裝npx守谓，npm，node才能正常運(yùn)行

base-cli.ps1 -needStyleLint -projectName testname -skipNpmInit

projectname不寫的話就是在當(dāng)前目錄安裝您单，而不是新建一個(gè)目錄cd到里面安裝斋荞。

注意eslint init的時(shí)候要選js格式的配置文件，因?yàn)槟壳爸粚懥诉@一種配置文件的解析虐秦。

單用powershell寫腳本局限性還是挺大的平酿，能快速出活，但是也沒有nodejs里面比如說讀取配置文件全部幫你搞定的包羡疗。包括代碼提示之類的編碼體驗(yàn)也差很多染服，而且代碼可讀性也差。叨恨。柳刮。

有錯(cuò)誤處理所以出錯(cuò)了會(huì)中途退出。出錯(cuò)了建議把出錯(cuò)的部分前面注銷痒钝，重新執(zhí)行接下來的命令秉颗。

param(
    [string]$projectName,
    [switch]$skipNpmInit,
    [switch]$needStyleLint,
    [switch]$needGitHooks
)

# 檢查上一條命令是否執(zhí)行成功，如果上一條命令失敗直接退出程序,退出碼1
function checkErr([string]$commandName) {
    if (-not $?) {
        # 輸出執(zhí)行失敗信息
        write-host -ForegroundColor Red  ('checkErr: {0} exctute failed' -f $commandName)
        throw('{0} error found' -f $commandName)
        exit 1
    }
    else {
        # 上條命令執(zhí)行成功后輸出消息
        write-host -ForegroundColor Green  ('checkErr: {0} exctute successful' -f $commandName)
    }
}
function createAndInitProject([string]$projectName) {
    trap {
        write-host -ForegroundColor Red  'createAndInitProject failed' 
        break
    }
    if (-not (test-path -LiteralPath $projectName)) {
        mkdir $projectName
        Set-Location $projectName
        if ($skipNpmInit) {
            initProject -skipNpmInit
        }
        else {
            initProject
        }
    }
    else {
        write-host -ForegroundColor Red ('當(dāng)前目錄已經(jīng)存在{0}送矩，不可重復(fù)創(chuàng)建蚕甥，請(qǐng)cd到目錄中執(zhí)行' -f $projectName)
    }
}
function initNpm([switch]$skipNpmInit) {
    if ($skipNpmInit) {
        npm init -y
            
    }
    else {
        npm init
    }
    checkErr -commandName 'npm init'
}
function initGit {
    if (-not (Test-Path -LiteralPath '.git')) {
        git init
        checkErr -commandName 'git init'
    }  
}
# 使用npm初始化項(xiàng)目
function initProject([switch]$skipNpmInit) {
    initNpm -skipNpmInit $skipNpmInit
         
    initGit
}
# 安裝typescript
function installTypeScript {
    npm install --save-dev typescript
    checkErr -commandName installTypeScript
}
# 創(chuàng)建tsconfig
function setTsconfig {
    npx tsc  --init --lib 'es2015,dom'  --strict --sourceMap --rootDir src --outDir dist
    checkErr -commandName setTsconfig
}
# 如果沒有eslint 配置文件，使用init進(jìn)行創(chuàng)建栋荸，并且修改js文件使其兼容prettier
function createEslintConfig {
    trap {
        write-host -ForegroundColor Red  'createEslintConfig failed' 
        break
    }
    
    if (-not (Test-Path -Path .eslintrc*)) {
        npx eslint --init
        checkErr -commandName 'eslint init'        
    }
    # npx eslint --init
    # checkErr -commandName 'eslint init'
    $eslintjsStr = 'module.exports = ' + (node -e "let eslintconfig = require('./.eslintrc.js');if (!eslintconfig.extends.includes('prettier')){ eslintconfig.extends.push('prettier') }; console.log(eslintconfig); ")
    $eslintjsStr | Out-File -Encoding utf8 .eslintrc.js
}
function createPrettierConfig {
    # 配置prettier,當(dāng)前路徑?jīng)]有prettier配置文件才執(zhí)行
    if (-not (test-path -path .prettierrc*)) {
        '{"semi":false,"singleQuote":true}' | Out-File  -Encoding utf8 .prettierrc.json
    }
}
function installLintAndPrettier {
    # 安裝eslint-config-prettier eslint prettier
    # 選擇性安裝stylelint-config-prettier stylelint
    param(
        [switch]$needStyleLint
    )
    if ($needStyleLint) {
        npm install --save-dev eslint-config-prettier eslint prettier stylelint-config-prettier stylelint
        checkErr -commandName 'install eslint prettier stylelint'
        # 創(chuàng)建stylelint配置文件
        if (-not (Test-Path -Path .stylelintrc.* )) {
            '{"extends": ["stylelint-config-standard","stylelint-config-prettier"]}' | Out-File .stylelintrc.json
        }
    }
    else {
        npm install --save-dev eslint-config-prettier eslint prettier
        checkErr -commandName 'install eslint prettier'
    }
    createPrettierConfig
    checkErr -commandName 'create prettier config'
    createEslintConfig 
    checkErr -commandName 'create eslint config'
}
# 安裝husky lint-staged
function installGithooks {
    trap {
        write-host -ForegroundColor Red  'installGithooks failed' 
        break
    }
    npm install --save-dev husky lint-staged
    checkErr -commandName 'npm install --save-dev husky lint-staged'
    # 配置lint-staged
    $packageJsonHash = Get-Content package.json | ConvertFrom-Json -AsHashtable
    if ($needStyleLint) {
        $packageJsonHash["lint-staged"] = @{
            "**/*.{js,jsx}"        = "eslint", "prettier  --write";
            "**/*.{css,scss,less}" = "stylelint", "prettier  --write";
            "**/*.{vue}"           = "eslint", "stylelint", "prettier  --write";
        }
        # mv .\package.json .\package.json.back
    }
    else {
        $packageJsonHash["lint-staged"] = @{
            "**/*.{js,jsx}" = "eslint", "prettier  --write";
            "**/*.{vue}"    = "eslint", "prettier  --write";
        }
    }
    $packageJsonHash | ConvertTo-Json | Out-File -Encoding utf8 package.json
    # 添加precommithook
    npx husky install
    npx husky add .husky/pre-commit "npx lint-staged"
}



if ($projectName) {
    createAndInitProject -projectName $projectName
}
else {
    if (Test-Path -Path 'package.json') {
        initGit
    }
    else {
        initProject -skipNpmInit
    }
}
# 安裝typescript本地開發(fā)依賴
installTypeScript
# 如果沒有tsconfig,創(chuàng)建一個(gè)默認(rèn)的
if (-not (test-path -path tsconfig.json)) {
    setTsconfig
}
installLintAndPrettier -needStyleLint=$needStyleLint
checkErr -commandName 'installLintAndPrettier'

if ($needGitHooks) {
    installGithooks
    checkErr -commandName 'installGithooks'
}

# 格式化比較亂的eslint配置文件
npx prettier -w .eslintrc.js