使用eslint將項目中的代碼修改統一的縮進

背景

繼承了組里師兄師姐寫的項目的前端代碼，但是是兩個人寫的，有兩格縮進的，有四格縮進的，有字符串外用單引號的，有用雙引號的。

於是搜索了一下，可以用eslint強制轉化。

eslint在github上的鏈接：https://github.com/eslint/eslint

安裝

1. 用VS Code打開剛下載好的項目，npm init項目初始化后（一般不需要這個步驟，這是為了加載各種npm包）
   在終端 npm install eslint --save-dev
結果：


不建議用 npm install eslint -g全局安裝，因為往下會發現eslint的配置有很多選擇，不同項目使用的配置可能不一樣。



2. ./node_modules/.bin/eslint --init 在這個項目上初始化eslint，然后會有一個初始化向導。

   

   

   

    

   

   上面的問題三種選擇： 
   如果選擇 Use a popular style guide 有：
   
   

    如果選擇 Answer questions about your style：

    

   完成初始化向導后：
   The config that you've selected requires the following dependencies:

   eslint-plugin-vue@latest
   Successfully created .eslintrc.js file in
   
   

3. 根據提示在終端中  npm install eslint-plugin-vue@latest
   
   

4. 在終端敲命令 
   ./node_modules/.bin/eslint yourfile.js/yourdir --fix

5. 在項目文件夾下的.eslintrc.js文件中 ，修改rules
   

       'rules': {
           'indent': [
               'warn',
               'tab'
               //強制統一縮進
           ],
           'linebreak-style': [
               'error',
               'windows'
               //Windows的行結尾方式
           ],
           'quotes': [
               'warn',
               'single'
               //單引號
           ],
           'semi': [
               'warn',
               'never'
               //不加分號
           ]
       }

    

6. 更多的自定義配置項可以看：
   https://www.cnblogs.com/yangshifu/p/9585462.html

 

遇到的問題

1. ESLint is disabled since its execution has not been approved or denied yet. Use the light bulb menu to open the approval dialog.

點擊右下角的ESLint，選擇Allow Everywhere即可。

答案來自