使用ESLint+Prettier來統一前端代碼風格

Prettier 簡單使用

ESLint 與 Prettier配合使用

 首先肯定是需要安裝 prettier ，並且你的項目中已經使用了 ESLint ，有 eslintrc.js 配置文件。

 

npm i -D prettier

配合ESLint檢測代碼風格

安裝插件：

npm i -D eslint-plugin-prettier

 

 eslint-plugin-prettier 插件會調用 prettier對你的代碼風格進行檢查，其原理是先使用 prettier對你的代碼進行格式化，然后與格式化之前的代碼進行對比，如果過出現了不一致，這個地方就會被 prettier進行標記。

接下來，我們需要在 eslintrc.js 的 rules 中添加， "prettier/prettier": "error" ，表示被 prettier 標記的地方拋出錯誤信息。

//.eslintrc.js
{
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

 

借助ESLint的autofix功能，在保存代碼的時候，自動將拋出error的地方進行fix。
如果你的eslint是直接通過cli方式啟動的，那么只需要在后面加上fix即可，如：  eslint --fix 。（eslint的fix功能會修改源文件！切記！！！）

如果與已存在的插件沖突怎么辦

npm i -D eslint-config-prettier

通過使用eslint-config-prettier配置，能夠關閉一些不必要的或者是與prettier沖突的lint選項。這樣我們就不會看到一些error同時出現兩次。使用的時候需要確保，這個配置在extends的最后一項。

//.eslintrc.js
{
  extends: [
    'standard', //使用standard做代碼規范
    "prettier",
  ],
}

這里有個文檔，列出了會與prettier沖突的配置項。

同時使用上面兩項配置

如果你同時使用了上述的兩種配置，那么你可以通過如下方式，簡化你的配置。

//.eslintrc.js
{
  "extends": ["plugin:prettier/recommended"]
}

最后貼一下我們項目中的完整配置，是在vue-cli生成的代碼基礎上修改的，並且使用standard做代碼規范：

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true,
    es6: true
  },
  extends: [
    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
    'standard',
    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
    'plugin:vue/essential',
    "plugin:prettier/recommended",
  ],
  // required to lint *.vue files
  plugins: [
    'vue'
  ],
  // add your custom rules here
  rules: {
    "prettier/prettier": "error",
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
}

什么？你們項目沒有啟用ESLint

 

不要慌，沒有ESLint也不要怕，可以通過onchange進行代碼的監聽，然后自動格式化代碼。只要在package.json的scripts下添加如下代碼，然后使用 npm run format ，我們就能監聽src目錄下所有的js文件並進行格式化：

"scripts": {
  "format": "onchange 'src/**/*.js' -- prettier --write {{changed}}"
}

當你想格式化的文件不止js文件時，也可以添加多個文件列表。

"scripts": {
  "format": "onchange 'test/**/*.js' 'src/**/*.js' 'src/**/*.vue' -- prettier --write {{changed}}"
}

當然，你也能夠在編輯器中配置對prettier的支持，具體支持哪些編輯器，請戳這里

 

 

 

參考：

使用ESLint+Prettier來統一前端代碼風格