整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
常上網(wǎng)的我們，有時候會為了圖個方便，在登錄網(wǎng)站的時候，輸入完用戶名和密碼隨手點擊記錄密碼，然后就登錄了，這樣的好處就是下次打開網(wǎng)站，不用輸密碼就直接登錄了，既方便又快捷。
小宋就是個比較懶的人，有時候注冊個網(wǎng)站，然后登錄時就直接記錄密碼，久而久之形成了這個習慣，也不那么在意網(wǎng)站的用戶名和密碼了，但是今天去登錄一個網(wǎng)站的時候，需要第二次輸入密碼確認，這一下懵圈了，因為是瀏覽器記錄密碼的，第一次就直接登錄進入了，而這讓確認密碼時，因為長時間不用密碼給忘記了，然后返回第一次登錄界面想要看密碼時，卻發(fā)現(xiàn)密碼都是被***號代替了，好尷尬。
怎么辦呢？求助萬能的度娘吧，于是就有了這篇文章，獨樂樂不如眾樂樂，有好東西一定要學會分享，話不多說，開始動手。
首先打開需要登錄的網(wǎng)站（一定是要記錄密碼的網(wǎng)站）如下圖
這時候我們選擇*號，然后點擊右鍵，選擇審查元素。這時我們會看到下圖
注意上圖紅框選中的位置，這時候我們只需要將<input type="password" name="t1" placeholder="請輸入密碼" class="am-form-field am-radius n-valid" aria-required="true">這段代碼里的password改為text，然后你會驚奇的發(fā)現(xiàn)，星號隱藏的內(nèi)容可以看到是什么了。
據(jù)文章介紹這個原理其實就是：當文本元素的type="password"的時候，各瀏覽器識別到以后就會用星號、點號等使密碼隱藏。各瀏覽器都會遵循這一協(xié)議進行html元素解析，然后渲染顯示在頁面。如果識別到的type不為password的其他值，就不會用星號、點號隱藏覆蓋密碼。
你學會了么？收藏保存起來，以備不時之需。
PS：其實記錄密碼的危險還是挺大的，建議各位在登錄網(wǎng)站時，盡量選擇不記住密碼登錄，這樣一旦電腦被控制，也不會造成密碼泄露。
寫出好代碼，卻不知道從哪里開始？想刪除死代碼？想在代碼庫中找出未被使用的變量？想在代碼中找出有問題的模式？
你是多元化團隊的負責人嗎？你的團隊中有新來的開發(fā)人員嗎？你擔心他們會寫出不符合標準的代碼嗎？在代碼評審時是否花了一整天的時間去檢查代碼標準，而不是實際的邏輯實現(xiàn)？
我一直在做這樣的事情，經(jīng)常忙得像熱鍋上的螞蟻。但從現(xiàn)在開始，我們要保證永遠不再擔心這類問題。在閱讀本文過程中，如果遇到困難，可以參考代碼庫（https://github.com/adeelibr/react-starter-kit）。
本文更多地是針對 React 應用程序，但同樣適用于其他 Web 項目。
1、什么是 Prettier？
Prettier 是一種代碼格式化程序，它以特定的方式為你格式化代碼。
請看這個 GIF：
2、我們?yōu)槭裁葱枰?Prettier？
3、如何設置 Prettier？
創(chuàng)建一個叫作 app 的文件夾，進入該文件夾，在命令行中敲入：
復制代碼
npm init -y
這將在 app 文件夾中創(chuàng)建一個 package.json 文件。
我將在本文中使用 yarn，但你也可以使用 npm。
安裝我們的第一個依賴項：
復制代碼
yarn add --dev prettier
這將安裝 package.json 中指定的開發(fā)依賴項，如下所示：
復制代碼
{
"name": "react-boiler-plate",
"version": "1.0.0",
"description": "A react boiler plate",
"main": "src/index.js",
"author": "Adeel Imran",
"license": "MIT",
"scripts": {
"prettier": "prettier --write src/**/*.js"
},
"devDependencies": {
"prettier": "^1.14.3"
}
}
稍后我會解釋“prettier”: “prettier?—?write src/**/*.js”的作用，現(xiàn)在先讓我們在 app 文件夾中創(chuàng)建一個 src/ 文件夾。在 src/ 文件夾中，再創(chuàng)建一個名為 index.js 的文件——名字可以隨意起。
在 index.js 文件中，按原樣粘貼這句話：
復制代碼
let person = {
name: "Yoda",
designation: 'Jedi Master '
};
function trainJedi (jediWarrion) {
if (jediWarrion.name === 'Yoda') {
console.log('No need! already trained');
}
console.log(`Training ${jediWarrion.name} complete`)
}
trainJedi(person)
trainJedi({ name: 'Adeel',
designation: 'padawan'
});
到目前為止，我們有了一個 src/app/index.js 文件，包含了一些難看的代碼。
我們可以做三件事：
我打算選擇第二項，所以我們安裝了一個依賴項，并在 package.json 中聲明了 Prettier。
現(xiàn)在在 app 根文件夾中創(chuàng)建一個 prettier.config.js 文件，并在其中添加一些 Prettier 規(guī)則：
復制代碼
module.exports = {
printWidth: 100,
singleQuote: true,
trailingComma: 'all',
bracketSpacing: true,
jsxBracketSameLine: false,
tabWidth: 2,
semi: true,
};
printWidth 將確保你的單行代碼不會超過 100 個字符。
singleQuote 會將所有雙引號轉(zhuǎn)換為單引號。
trailingComma 將確保在最后一個對象屬性的末尾會有一個逗號。
bracketSpacing 在對象字面量之間打印空格：
復制代碼
If bracketSpacing is true - Example: { foo: bar }
If bracketSpacing is false - Example: {foo: bar}
jsxBracketSameLine 將在多行 JSX 元素的最后一行放置 >：
復制代碼
// true example
<button
className="prettier-class"
id="prettier-id"
onClick={this.handleClick}>
Click Here
</button>
// false example
<button
className="prettier-class"
id="prettier-id"
onClick={this.handleClick}
>
Click Here
</button>
tabWidth 指定單個縮進的空格數(shù)。
如果 semi 設置為 true，將在語句末尾加上 ;。
現(xiàn)在讓我們來說說這個腳本的作用：
復制代碼
“prettier”: “prettier — write src/**/*.js”
它的意思是運行 prettier，并讓它在 src/ 文件夾中查找所有的.js 文件。–write 標志告訴 prettier 要把格式化好的內(nèi)容保存到文件中，并找出格式化過程中發(fā)現(xiàn)的任何異常。
現(xiàn)在在終端中運行這個腳本：
復制代碼
yarn prettier
這是我在運行代碼時看到的：
1、什么是代碼 linter？
代碼 linting 是一種代碼靜態(tài)分析，通常被用于查找不符合某些樣式指南的有問題的模式或代碼。大多數(shù)編程語言都有代碼 linting，編譯器有時會在編譯過程中加入 linting。——來自 ESLint
為什么 JavaScript 需要 linter？
由于 JavaScript 是動態(tài)類型的，而且是一種松散類型的語言，因此開發(fā)人員在使用這門語言時很容易犯錯。因為不經(jīng)過編譯，所以通常需要在執(zhí)行.js 文件的情況下才能發(fā)現(xiàn)語法或其他錯誤。
像 ESLint 這樣的 linting 工具可以幫助開發(fā)人員在不執(zhí)行 JavaScript 代碼的情況下發(fā)現(xiàn)問題。
2、是什么讓 ESLint 如此特別？
ESLint 中的所有東西都是可插拔的，你甚至可以在運行時添加規(guī)則。你添加的每個 linting 規(guī)則都是獨立的，任何一個規(guī)則都可以獨自打開或關閉。每個規(guī)則都可以設置為警告或錯誤級別。
現(xiàn)在有 2 個流行的風格指南：
我一直在使用 Airbnb 的風格指南。這個風格指南一直有人在維護，在本文中，我將使用受 Airbnb 風格指南啟發(fā)的規(guī)則集。
首先更新 package.json 文件：
復制代碼
{
"name": "react-boiler-plate",
"version": "1.0.0",
"description": "A react boiler plate",
"main": "src/index.js",
"author": "Adeel Imran",
"license": "MIT",
"scripts": {
"lint": "eslint --debug src/",
"lint:write": "eslint --debug src/ --fix",
"prettier": "prettier --write src/**/*.js"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.(js|jsx)": ["npm run lint:write", "git add"]
},
"devDependencies": {
"babel-eslint": "^8.2.3",
"eslint": "^4.19.1",
"eslint-config-airbnb": "^17.0.0",
"eslint-config-jest-enzyme": "^6.0.2",
"eslint-plugin-babel": "^5.1.0",
"eslint-plugin-import": "^2.12.0",
"eslint-plugin-jest": "^21.18.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-prettier": "^2.6.0",
"eslint-plugin-react": "^7.9.1",
"husky": "^1.1.2",
"lint-staged": "^7.3.0",
"prettier": "^1.14.3"
}
}
在開始進行配置之前，先讓我們來看看每個依賴包的功能。
babel-eslint：這個包讓你可以輕松在 Babel 上使用 lint。如果你不使用 ESLint 尚不支持的 Flow 或?qū)嶒炐怨δ?，則不一定需要這個插件。
eslint：這是 lint 代碼所需的主要工具。
eslint-config-airbnb：這個包提供了所有 Airbnb 的 ESLint 配置，你可以修改它們。
eslint-plugin-babel：babel-eslint 的插件伴侶。
eslint-plugin-import：這個插件旨在支持 ES2015+（ES6+）的導入 / 導出語法，并防止出現(xiàn)拼寫錯誤的文件路徑和導入名稱。
eslint-plugin-jsx-a11y：適用于 JSX 元素可訪問性規(guī)則的 linting 規(guī)則。
eslint-plugin-prettier：讓 ESLint 與 Prettier 的使用更順暢。
eslint-plugin-react：特定于 React 的 linting 規(guī)則。
eslint-config-jest-enzyme：用于特定于 React 和 Enzyme 的全局變量。這個 lint 配置讓 ESLint 知道有哪些全局變量，并且不會針對它們發(fā)出警告——有點像斷言 it 和 describe。
eslint-plugin-jest：Jest 的 ESLint 插件。
husky：在自動化部分會進行更多介紹。
lint-staged：在自動化部分會進行更多介紹。
現(xiàn)在我們已經(jīng)有了基本的了解，接下來可以開始了。
在 app/ 根目錄創(chuàng)建.eslintrc.js 文件：
復制代碼
module.exports = {
env: {
es6: true,
browser: true,
node: true,
},
extends: ['airbnb', 'plugin:jest/recommended', 'jest-enzyme'],
plugins: [
'babel',
'import',
'jsx-a11y',
'react',
'prettier',
],
parser: 'babel-eslint',
parserOptions: {
ecmaVersion: 6,
sourceType: 'module',
ecmaFeatures: {
jsx: true
}
},
rules: {
'linebreak-style': 'off', // Don't play nicely with Windows.
'arrow-parens': 'off', // Incompatible with prettier
'object-curly-newline': 'off', // Incompatible with prettier
'no-mixed-operators': 'off', // Incompatible with prettier
'arrow-body-style': 'off', // Not our taste?
'function-paren-newline': 'off', // Incompatible with prettier
'no-plusplus': 'off',
'space-before-function-paren': 0, // Incompatible with prettier
'max-len': ['error', 100, 2, { ignoreUrls: true, }], // airbnb is allowing some edge cases
'no-console': 'error', // airbnb is using warn
'no-alert': 'error', // airbnb is using warn
'no-param-reassign': 'off', // Not our taste?
"radix": "off", // parseInt, parseFloat radix turned off. Not my taste.
'react/require-default-props': 'off', // airbnb use error
'react/forbid-prop-types': 'off', // airbnb use error
'react/jsx-filename-extension': ['error', { extensions: ['.js'] }], // airbnb is using .jsx
'prefer-destructuring': 'off',
'react/no-find-dom-node': 'off', // I don't know
'react/no-did-mount-set-state': 'off',
'react/no-unused-prop-types': 'off', // Is still buggy
'react/jsx-one-expression-per-line': 'off',
"jsx-a11y/anchor-is-valid": ["error", { "components": ["Link"], "specialLink": ["to"] }],
"jsx-a11y/label-has-for": [2, {
"required": {
"every": ["id"]
}
}], // for nested label htmlFor error
'prettier/prettier': ['error'],
},
};
還要在 app/ 根目錄中添加.eslintignore 文件：
復制代碼
/.git /.vscode node_modules
我們先介紹一下.eslintrc.js 文件的作用。
先把它拆分一下：
復制代碼
module.exports = {
env:{},
extends: {},
plugin: {},
parser: {},
parserOptions: {},
rules: {},
};
3、現(xiàn)在介紹一下.eslintignore。
.eslintignore 里包含了我們不希望 ESLint 對它們進行 lint 的路徑列表。這里我只指定三個：
接下來讓我們來看看 package.json 中新添加的腳本。
復制代碼
"lint": "eslint --debug src/" "lint:write": "eslint --debug src/ --fix"
到目前為止，我們設置好了 prettier 和 eslint，但每次我們都要運行腳本。接下來我們讓它更加自動化一些。
要在保存代碼時進行格式化和 lint，需要使用像 VS Code 這樣的編輯器：
安裝 ESLint 擴展插件。在此（https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint）下載插件或在 VS Code 編輯器中按下 ctrl + shift + x 打開擴展模塊，搜索 eslint，將出現(xiàn)一系列插件。安裝 Dirk Ba??eumer 開發(fā)的那個。安裝完成后，點擊 reload 按鈕重新啟動編輯器。
安裝好這個插件后，在 app/ 根文件夾中創(chuàng)建一個名為.vscode/ 的文件夾 ——不要忘了那個點號，這個非常重要。
在文件夾中創(chuàng)建一個 settings.json 文件，如下所示：
復制代碼
{
"editor.formatOnSave": false,
"eslint.autoFixOnSave": true,
}
需要注意的是，當你運行 yarn lint:write 時，它也會 lint 和美化你的代碼。
試想一下，如果你有 2 萬行代碼，然后通過手動的方式進行審計和改進，然后再想象一下用一個命令就可以完成所有事情。手動方法可能需要 30 天，而自動方法可能只需要 30 秒。
腳本已經(jīng)設置好了，每次點擊保存時，編輯器都會對特定文件做出神奇的回應。但是，并不是團隊中的每個人都會選擇使用 VS Code。不過沒關系，我們可以更自動化一些。
1、什么是 husky？
husky（https://github.com/typicode/husky）是一個 Git 鉤子，你可以在提交代碼前或在將代碼推送到分支時執(zhí)行某些特定的操作。
你所要做的就是安裝 husky：
復制代碼
yarn add --dev husky
然后在 package.json 文件中添加以下內(nèi)容：
復制代碼
"husky": {
"hooks": {
"pre-commit": "YOUR_COMMAND_HERE",
"pre-push": "YOUR_COMMAND_HERE"
}
},
每次在提交或推送代碼時，它都會執(zhí)行某個腳本或命令——比如運行測試用例或格式化代碼。
1、什么是 lint-staged？
lint-staged（https://github.com/okonet/lint-staged）可以在暫存（Git staged）文件上運行 linter，這樣就不會將錯誤的代碼推送到分支上。
為什么要用 lint-staged？
在提交代碼之前進行 lint 是很有意義的，你可以確保沒有錯誤進入到代碼庫中，并且可以強制應用代碼樣式。但在整個項目上運行 lint 過程會很慢，而且有些 lint 結果可能無關緊要。你可能只想對要提交的文件進行 lint。
這個項目提供了一個腳本，這個腳本將執(zhí)行任意的 shell 任務，并將暫存文件列表作為參數(shù)，按指定的通配模式進行文件過濾。
你要做的是安裝 lint-staged：
復制代碼
yarn add --dev lint-staged
然后在 package.json 文件中添加：
復制代碼
"lint-staged": {
"*.(js|jsx)": ["npm run lint:write", "git add"]
},
這段配置的意思是先運行 lint:write 命令，然后將文件添加到暫存區(qū)域。它僅針對.js 和.jsx 文件運行這個命令，但你也可以根據(jù)需要針對其他文件運行這個命令。
每次提交代碼之前，都會運行一個叫作 lint-staged 的腳本，這個腳本將運行 npm run lint:write 命令，這個將 lint 并格式化你的代碼，然后將代碼添加到暫存區(qū)并提交。
最終的 package.json 文件應如下所示。
復制代碼
{
"name": "react-boiler-plate",
"version": "1.0.0",
"description": "A react boiler plate",
"main": "src/index.js",
"author": "Adeel Imran",
"license": "MIT",
"scripts": {
"lint": "eslint --debug src/",
"lint:write": "eslint --debug src/ --fix",
"prettier": "prettier --write src/**/*.js"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.(js|jsx)": ["npm run lint:write", "git add"]
},
"devDependencies": {
"babel-eslint": "^8.2.3",
"eslint": "^4.19.1",
"eslint-config-airbnb": "^17.0.0",
"eslint-config-jest-enzyme": "^6.0.2",
"eslint-plugin-babel": "^5.1.0",
"eslint-plugin-import": "^2.12.0",
"eslint-plugin-jest": "^21.18.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-prettier": "^2.6.0",
"eslint-plugin-react": "^7.9.1",
"husky": "^1.1.2",
"lint-staged": "^7.3.0",
"prettier": "^1.14.3"
}
}
現(xiàn)在，每當你提交代碼時：
復制代碼
$ git add . $ git commit -m "some descriptive message here"
它將根據(jù).eslintrc.js 文件的所有規(guī)則對代碼進行 lint 和格式化。有了這個，你就可以確保沒有壞代碼被推到生產(chǎn)環(huán)境中。
首先在 app/ 根文件夾中創(chuàng)建一個.editorconfig 文件，然后在該文件中粘貼以下代碼：
復制代碼
# EditorConfig is awesome: http://EditorConfig.org # top-most EditorConfig file root = true [*.md] trim_trailing_whitespace = false [*.js] trim_trailing_whitespace = true # Unix-style newlines with a newline ending every file [*] indent_style = space indent_size = 2 end_of_line = lf charset = utf-8 insert_final_newline = true max_line_length = 100
那么 EditorConfig 是什么東西？
并不是每個人都會使用 VS Code，所以為了讓每個人保持統(tǒng)一（例如在制表符空格或換行方面），我們使用.editorconfig，這樣有助于強制執(zhí)行某些規(guī)則。
支持 EditorConfig（https://editorconfig.org/）的編輯器包括 Web Storm、App Code、Atom、Eclipse、Emacs、bbedit，等等。
上述的配置將執(zhí)行以下操作：
英文原文：https://medium.freecodecamp.org/these-tools-will-help-you-write-clean-code-da4b5401f68e
《學習 Dart 的 10 大理由》
《你的前端知識框架，該如何搭建？》
《最新 Go 語言學習路線圖》
......
查看文章，點擊了解更多
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
