Prettier 代碼格式化

添加依賴

yarn add prettier

配置 WebStorm

格式化文件

在根目錄下新建.prettierrc.json的文件，標識格式化規范 文件內容如下

{"printWidth": 100,"semi": true,"vueIndentScriptAndStyle": true,"singleQuote": true,"trailingComma": "all","proseWrap": "never","htmlWhitespaceSensitivity": "strict","endOfLine": "auto" }

• singleQuote: 單引號
• trailingComma: 對象屬性最后沒有","
• semi: 是否需要分號

更多設置參考官方文檔：https://prettier.io/docs/en/options.html

在根目錄下新建.prettierignore的文件，標識格式化忽略的文件或者目錄 文件內容如下

/dist/* .local .output.js /node_modules/****/*.svg **/*.sh/public/*

編輯根目錄下package.json 添加一行代碼內容如下

"lint:prettier": "prettier --write \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\""

執行yarn run lint:prettier即可按照規范格式化指定范圍內的文件代碼

Stylelint 檢查

添加依賴

yarn add stylelint

配置 WebStorm

Eslint 檢查

添加依賴

yarn add eslint

配置 WebStorm

TypeScript 規范

配置 WebStorm

總結

以上是生活随笔為你收集整理的WebStorm设置前端开发代码规范的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。